微信小程序，引用vant-weapp库，上传组件uploader，支持多选

Posted 2023-03-09

参考技术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('用户点击取消')



,

    )

,