需求:小程序端上传图片,可一次传多张照片、预览、删除。
问题:vant写的对我这种没有基础的人来说,确实有点头疼,参考了这篇参考链接,然后根据需求改了改。
实现结果:
代码:
wxml:
<!-- 传图片 -->
<view class="addImage" >
<van-uploader
file-list="{
{ fileList }}"
accept="image"
max-count="9"
multiple
bind:after-read="afterRead"
bind:delete="deleteImg"
bind:before-read="beforeRead"
deletable="{
{ true }}"
preview-size="{
{(width+50)/4 }}" />
</view>
js:后端部分,请根据自己后端接口修改
//文件读取完成后
afterRead(event) {
const { file } = event.detail;
var that = this
const fileList = that.data.fileList
//获得这次上传的图片数量,上传时避免重复上传之前传过的文件
const thisNum = file.length
const beforeNum = fileList.length
const totalNum = thisNum + beforeNum
//还没上传时将选择的图片的上传状态设置为加载
for (let j = 0; j < thisNum; j++) {
file[j].status='uploading'
fileList.push(file[j])
}
that.setData({ fileList })
// console.log('fileList',that.data.fileList)
// console.log('file',file)
//上传服务器
for (let i = beforeNum; i < totalNum; i++) {
that.uploadImg(i,that.data.fileList[i].url )
}
},
js:
uploadImg(fileListIndex,fileURL) {
var that = this
//上传文件
const filePath = fileURL // 小程序临时文件路径
// console.log("filePath",filePath)
wx.uploadFile({
url: '后端地址',
filePath: filePath,
name: 'file',
header: {
"Content-Type": "multipart/form-data",
},
formData: {
fileType:'image',
reName:'true',
thumbnail:'true'
},
success(res) {
var tem = JSON.parse(res.data)
// 上传完成需要更新 fileList
that.setData({
[`fileList[${fileListIndex}].url`]: tem.data.fileUrl,
[`fileList[${fileListIndex}].status`]: 'done'
})
wx.showToast({ title: '上传成功', icon: 'none' })
},
fail: function (res) {
console.log("file upload fail")
},
})
},