场景说明

微信小程序 - 进行图片上传（图片多选、图片放大预览）

官网详解：https://vant-contrib.gitee.io/vant-weapp/#/uploader

1.组件引入

<config>
{
  navigationBarTitleText: 'xxxx',
  usingComponents: {
    "van-uploader": "module:@vant/weapp/dist/uploader",
  }
}
</config>

2.代码模块

<wxml>

<van-uploader
  preview-size="72"
  multiple
  data-idx="{{index}}"                          // 传入绑定的值，业务需要
  file-list="{{ item.fileList }}"   // 选中图片文件数组
  max-count="9"                                         // 可选图片最大数量
  bind:after-read="afterRead"               // 图片选择回调
  bind:delete="deleteClick"                 // 图片删除事件
/>

<js>

// data
data: {
  stairs_Items: [], // 图片数组
},

// 图片选择回调
afterRead(event) {
  let that = this;
  wx.showLoading({
    title: '上传中...'
  });
  const { file } = event.$wx.detail;
  let uploadPromiseTask = [];
  for (let i = 0; i < file.length; i++) {
    uploadPromiseTask.push(this.uploadFile(file[i].url));
  }
  Promise.all(uploadPromiseTask)
    .then(res => {
      that.stairs_Items[
        event.$wx.currentTarget.dataset.idx
      ].fileList = that.stairs_Items[
        event.$wx.currentTarget.dataset.idx
      ].fileList.concat(res);
      wx.hideLoading();
    })
    .catch(error => {
      wx.hideLoading();
      wx.showToast({
        title: '上传失败！',
        icon: 'none'
      });
    });
},
      
// 删除指定位置图片
deleteClick(event) {
  if (this.stairs_Items) {
    const { index } = event.$wx.detail;
    this.stairs_Items[event.$wx.currentTarget.dataset.idx].fileList.splice(
      index,
      1
    );
  }
},
 
// 图片上传
uploadFile(uploadFile) {
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: utils.imageUri + 'resource/resources/upload', // 上传地址
      filePath: uploadFile, // 上传文件
      name: 'file',
      success: res => {
        //  上传完成
        const data = JSON.parse(res.data);
        const fileUrl = utils.imageUri + data.data.fileUrl;
        resolve({ url: fileUrl });
      },
      fail: err => {
        reject(err);
      }
    });
  });
},

Props（参数）

accept 的合法值

Event（事件）