Wechat small program (wepy + vant = file uploader)

The scene that

Wechat mini program – upload pictures (multiple selection of pictures, image enlargement and preview)

Contrib.gie10. IO/appellate-appellate /…

1. Importing components

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

2. Code modules

<van-uploader
  preview-size="72"
  multiple
  data-idx="{{index}}"// Pass in the binding value as required by the businessfile-list="{{ item.fileList }}"// Select the image file arraymax-count="9"// Select the maximum number of imagesbind:after-read="afterRead"// Select the image callbackbind:delete="deleteClick"// Image deletion event />
Copy the code

// data
data: {
  stairs_Items: [].// Array of images
},

// Select the image callback
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: 'Upload failed! '.icon: 'none'
      });
    });
},
      
// Delete the image of the specified location
deleteClick(event) {
  if (this.stairs_Items) {
    const { index } = event.$wx.detail;
    this.stairs_Items[event.$wx.currentTarget.dataset.idx].fileList.splice(
      index,
      1); }},// Image upload
uploadFile(uploadFile) {
  return new Promise((resolve, reject) = > {
    wx.uploadFile({
      url: utils.imageUri + 'resource/resources/upload'.// Upload the image address
      filePath: uploadFile,   // Upload the file
      name: 'file'.success: res= > {
        // Upload complete
        const data = JSON.parse(res.data);
        const fileUrl = utils.imageUri + data.data.fileUrl;
        resolve({ url: fileUrl });
      },
      fail: err= >{ reject(err); }}); }); },Copy the code

Props (parameters)

The legal value of Accept

An Event