uploader组件示例代码
uploader组件文档说的很不清除,这里做了一个代码片段,有兴趣可以看看
/**
* 这里使用到云函数,需要填写正确的云开发配置字段才可以正常使用
* uploader组件主要就是两个方法removeImage,uploadFile,一个删除,一个上传,其他的可以暂时不考虑
*/
Page({
data: {
files: [
{url:'http://n.sinaimg.cn/photo/transform/700/w1000h500/20200219/ca9a-iprtayz8150608.jpg'}
]
},
onLoad() {
console.log(this);
this.setData({
uploadFile: this.uploadFile.bind(this)
//这里需要绑定uploadFile函数,因为在uploader组件中会调用这个方法,不绑定的话,this会指向uploader组件中的this,但是uploader组件中没有这个方法,这个方法需要用户自定义
});
},
removeImage: async function ({detail}) {
console.log(detail);
this.data.files.splice(detail.index,1);//同步更新files字段数据
await wx.cloud.deleteFile({//直接调用云函数删除
fileList:[detail.item.url]
});
},
uploadFile: async function (files) {
console.log('upload files', files)
let tempFilePaths = files.tempFilePaths;
let arr=[];//保存最后返回的结果
for (let i = 0; i < tempFilePaths.length; i++) {
let {fileID}= await wx.cloud.uploadFile({
//云存储中的文件名这里直接截取本地文件路径的一部分使用,方便
cloudPath: 'images/'+tempFilePaths[i].match(/\w+\.\w+$/g)[0],
filePath: tempFilePaths[i], // 文件路径
});
arr.push(fileID);
//更新files字段
this.data.files.push({
url:fileID
})
}
console.log(arr);
return {urls:arr};
//返回的格式是{urls:['xxx.jpg','xxx.jpg']}
},
uploadError(e) {
console.log('upload error', e.detail)
},
uploadSuccess(e) {
console.log('upload success', e.detail)
}
});