微信小程序（wepy + vant = 文件上传 van-uploader）

场景说明

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

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

1.组件引入

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

2.代码模块

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

// 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（参数）

参数	说明	类型	默认值
name	标识符，可以在回调函数的第二项参数中获取	string | number	-
accept	接受的文件类型, 可选值为all media image file video	string	image
sizeType	所选的图片的尺寸, 当accept为image类型时设置所选图片的尺寸可选值为original compressed	string[]	['original','compressed']
preview-size	预览图和上传区域的尺寸，默认单位为px	string | number	80px
preview-image	是否在上传完成后展示预览图	boolean	true
preview-full-image	是否在点击预览图后展示全屏图片预览	boolean	true
multiple	是否开启图片多选，部分安卓机型不支持	boolean	false
disabled	是否禁用文件上传	boolean	false
show-upload	是否展示文件上传按钮	boolean	true
deletable	是否展示删除按钮	boolean	true
capture	图片或者视频选取模式，当accept为image类型时设置capture可选值为camera可以直接调起摄像头	string | string[]	['album', 'camera']
max-size	文件大小限制，单位为byte	number	-
max-count	文件上传数量限制	number	-
upload-text	上传区域文字提示	string	-
image-fit	预览图裁剪模式，可选值参考小程序image组件的mode属性	string	scaleToFill
use-before-read	是否开启文件读取前事件	boolean	-
camera	当 accept 为 video 时生效，可选值为 back front	string	-
compressed	当 accept 为 video 时生效，是否压缩视频，默认为true	boolean	-
max-duration	当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒	number	-
upload-icon	上传区域图标，可选值见 Icon 组件	string	plus

accept 的合法值

参数	说明
media	图片和视频
image	图片
video	视频
file	从客户端会话选择图片和视频以外的文件
all	从客户端会话选择所有文件

Event（事件）

事件名	说明	回调参数
bind:before-read	文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为true	event.detail.file: 当前读取的文件，event.detail.callback: 回调函数，调用callback(false)终止文件读取
bind:after-read	文件读取完成后	event.detail.file: 当前读取的文件
bind:oversize	文件超出大小限制	-
bind:click-preview	点击预览图片	event.detail.index: 点击图片的序号值
bind:delete	删除图片	event.detail.index: 删除图片的序号值