uniapp结合uview实现图片批量上传

uview中上传图片组件的代码

详细请看uview官网,本次用的事件有两个

1、模板中的组件使用

 <u-upload
        ref="uUploadMultiple"
        :file-list="uploadImgs"
        accept="image"
        :max-size="4 * 1024 * 1024"
        @oversize="oversize"
        :show-progress="false"
        :auto-upload="false"
        max-count="4"
        width="180"
        height="180"
        @on-remove="deletePic"
        @on-choose-complete="afterReadImgs"
      >
      </u-upload>

2、data中声明的数据

  data () {
    return {
      uploadImgs: [],
      activityForm: {
        activityPicInfos: [], 
      },
      header: {
        //根据你接口需求自定义
        Authentication: this.token,
      },
      uploadImgUrl，//图片上传地址
    }
  },

3、method中的代码逻辑

    // 文件超出大小限制
    oversize () {
      uni.showToast({
        title: '图片最大不能超过4M',
        icon: 'none',
      })
    },
    // 读取文件 多张图片上传
    afterReadImgs (event) {
      this.multipleUpload(this.$refs.uUploadMultiple.lists, 2)
    },
    // 多张图片上传
    multipleUpload (event, type) {
      let that = this
      let num = 5
      event.map(item => {
        if (num === event.length) {
          uni.showToast({
            title: '最多上传4张图片',
            icon: 'none',
          })
          return
        }
        num += 1
        if (item.file) {
          that.uploadDo(item, type)
        }
      })
    },
    // 执行上传
    uploadDo (event, type) {
      const that = this
      uni.uploadFile({
        // source 上传图片来源 0：用户上传头像:1：活动 2：攻略 3：酒店 4：景点(0、1、2时需要传token)
        url: uploadImgUrl + '?source=1',
        filePath: event.file.path,
        header: {
          Authentication: that.token,
        },
        name: 'file',
        success (res) {
          const { data } = JSON.parse(res.data)
          that.activityForm.activityPicInfos.push({
            picUrl: data.fileUrl,
            isFirst: 0,
          })
        },
      })
    },