微信小程序，引用vant-weapp库，上传组件uploader，支持多选
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序，引用vant-weapp库，上传组件uploader，支持多选相关的知识，希望对你有一定的参考价值。
参考技术A wxml部分<van-uploader file-list=" picture_list " preview-full-image="false" max-size="2048000" max-count="9" multiple="true" bind:after-read="afterRead" bind:delete="deleteImg" />
js部分
afterRead:function(event)
const file = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
var obj=
obj.path=file;
this.uploadimg(obj);
,
uploadimg:function(data)
wx.showLoading(
title:'上传中...',
mask:true,
)
var that =this,
i = data.i ? data.i :0,
success = data.success ? data.success :0,
fail = data.fail ? data.fail :0;
let userInfo=wx.getStorageSync('userInfo');
let peopleId=userInfo.peopleId;
var picture_list = that.data.picture_list;
wx.uploadFile(
url: baseUrl +'impl/uploadImg',
filePath: data.path[i].path,
name:'file',
formData:
'type':1,
'peopleId':peopleId,
,
success: (res) =>
wx.hideLoading();
success++;
let obj = JSON.parse(res.data).data;
if(obj.hasOwnProperty('url'))
picture_list.push(
url:obj.url,
id:obj.id
);
that.setData(
picture_list
)
,
fail: (err) =>
wx.hideLoading();
wx.showToast(
title:'上传失败!',
icon:'none'
)
fail++;
,
complete: () =>
i++;
if (i == data.path.length) //当图片传完时，停止调用
else //若图片还没有传完，则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);//递归，回调自己
);
,
deleteImg(e)
let index=e.detail.index;
console.log(index);
let picture_list=this.data;
let that=this;
wx.showModal(
content:'确定删除？',
success: (res) =>
if (res.confirm)
picture_list.splice(index,1);
that.setData(
picture_list
)
console.log(that.data.picture_list);
else if (res.cancel)
console.log('用户点击取消')
,
)
,
以上是关于微信小程序，引用vant-weapp库，上传组件uploader，支持多选的主要内容，如果未能解决你的问题，请参考以下文章