小程序上传多张图片

//html
	  <view class="mb-16 mt-32">
        <van-uploader
          file-list="{{ fileList }}"
          max-count="5"
          bind:after-read="afterRead"
          preview-size="60"
          bind:delete="del"
        />
        <view class="size-26 gray-2">（上传凭证，最多5张）</view>
      </view>
     <!-- 提交 -->
    <view class="submit fixed ptb-16 plr-24 fixed-bottom bg" bindtap="submit">
      <van-button type="danger" round block size="large">提交</van-button>
    </view>

//js
import { http, uploadImage } from '../../utils/index'
data: {
    fileList: [],
    img: [],
 },
	//上传
	async afterRead(event) {
      const { file, index } = event.detail
      this.setData({
        [`fileList[${index}]`]: {
          url: file.path,
          status: 'uploading',
          message: '上传中',
        },
      })
      try {
        const { data } = await uploadImage(file.path)
        this.setData({
          [`img[${index}]`]: JSON.parse(data).data.url,
          [`fileList[${index}]`]: { url: file.path, status: 'success' },
        })
      } catch (err) {
        this.setData({
          [`fileList[${index}]`]: {
            url: file.path,
            status: 'failed',
            message: '上传失败',
          },
        })
      }
    },
    //删除
	

	> bug:删除数组的方法splice，会直接改变原数组为删除后的数组，返回值是删除掉的那一项

    del(event) {
      const index = event.detail.index
      this.data.img.splice(index, 1)
      this.data.fileList.splice(index, 1)
      this.setData({
        img: this.data.img,
        fileList: this.data.fileList,
      })
    },
    //提交
    submit() {
      const { img } = this.data
    },

// 公共上传图片的方法
/**
 * 上传图片
 * @param {String} tempFilePath 图片路径
 */
export const uploadImage = tempFilePath => {
  return wxp.uploadFile({
    url: baseURL + '/weapp' + '/common/uploadali',
    filePath: tempFilePath,
    name: 'file',
    formData: {
      file: tempFilePath,
    },
    header: {
      'Content-Type': 'multipart/form-data',
      token: wx.getStorageSync('token'),
      ...headers,
    },
  })
}