automat-store-mini/components/tui-upload/tui-upload.js

Component({
  properties: {
    //初始化图片路径
    value: {
      type: Array,
      value: [],
      observer(val) {
        this.initImages()
      }
    },
    //禁用删除
    forbidDel: {
      type: Boolean,
      value: false
    },
    //禁用添加
    forbidAdd: {
      type: Boolean,
      value: false
    },
    //服务器地址
    serverUrl: {
      type: String,
      value: ""
    },
    //限制数
    limit: {
      type: Number,
      value: 9
    },
    //original 原图，compressed 压缩图，默认二者都有
    sizeType: {
      type: Array,
      value:['original', 'compressed']
    },
    //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
    sourceType: {
      type: Array,
      value:['album', 'camera']
    },
    //可上传图片类型，默认为空，不限制  Array<String> [jpg,png,gif]
    imageFormat: {
      type: Array,
      value:[]
    },
    //单张图片大小限制 MB 
    size: {
      type: Number,
      value: 4
    },
    //项目名，默认为 file
    fileKeyName: {
      type: String,
      value: "file"
    },
    //HTTP 请求 Header, header 中不能设置 Referer。
    header: {
      type: Object,
      value: {}
    },
    //HTTP 请求中其他额外的 form data
    formData: {
      type: Object,
      value: {}
    }
  },
  lifetimes: {
    ready: function () {
      this.initImages()
    }
  },
  data: {
    //图片地址
    imageList: [],
    //上传状态：1-上传成功 2-上传中 3-上传失败
    statusArr: []
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initImages() {
      let imgArr = [...this.data.value]
      let status = []
      for (let item of imgArr) {
        status.push("1")
      }
      this.setData({
        imageList: [...imgArr],
        statusArr: status
      })
    },
    // 重新上传
    reUpLoad(e) {
      let index = Number(e.currentTarget.dataset.index)
      let value = `statusArr[${index}]`
      this.setData({
        [value]: "2"
      })
      this.change()
      this.uploadImage(index, this.data.imageList[index]).then(() => {
        this.change()
      }).catch(() => {
        this.change()
      })
    },
    change() {
      let status = ~this.data.statusArr.indexOf("2") ? 2 : 1
      if (status != 2 && ~this.data.statusArr.indexOf("3")) {
        // 上传失败
        status = 3
      }
      this.triggerEvent('complete', {
        status: status,
        imgArr: this.data.imageList
      })
    },
    toast(text) {
      text && wx.showToast({
        title: text,
        icon: "none"
      });
    },
    chooseImage: function () {
      let _this = this;
      wx.chooseImage({
        count: _this.data.limit - _this.data.imageList.length,
        sizeType: _this.data.sizeType,
				sourceType: _this.data.sourceType,
        success: function (e) {
          let imageArr = [];
          let status = []
          for (let i = 0; i < e.tempFiles.length; i++) {
            let len = _this.data.imageList.length;
            if (len >= _this.data.limit) {
              _this.toast(`最多可上传${_this.data.limit}张图片`);
              break;
            }

            //过滤图片类型
							let path = e.tempFiles[i].path;

							if (_this.data.imageFormat.length > 0) {
								let format = path.split(".")[(path.split(".")).length - 1];
								if (_this.data.imageFormat.indexOf(format) == -1) {
									let text = `只能上传 ${_this.data.imageFormat.join(',')} 格式图片！`
									_this.toast(text);
									continue;
								}
							}

							//过滤超出大小限制图片
							let size = e.tempFiles[i].size;

							if (_this.data.size * 1024 * 1024 < size){
								let err=`单张图片大小不能超过：${_this.data.size}MB`
								_this.toast(err);
								continue;
							}

            imageArr.push(path)
            status.push("2")
          }
          _this.setData({
            imageList: _this.data.imageList.concat(imageArr),
            statusArr: _this.data.statusArr.concat(status)
          })
          _this.change()

          let start = _this.data.imageList.length - imageArr.length
          for (let j = 0; j < imageArr.length; j++) {
            let index = start + j
            //服务器地址
            if (_this.data.serverUrl) {
              _this.uploadImage(index, imageArr[j]).then(() => {
                _this.change()
              }).catch(() => {
                _this.change()
              })
            } else {
              //无服务器地址则直接返回成功
              let value = `statusArr[${index}]`
              _this.setData({
                [value]: "1"
              })
              _this.change()
            }
          }
        }
      })
    },
    uploadImage: function (index, url) {
      let _this = this;
      let status = `statusArr[${index}]`;
      return new Promise((resolve, reject) => {
        wx.uploadFile({
          url: this.data.serverUrl,
          name: this.data.fileKeyName,
          header: this.data.header,
          formData: this.data.formData,
          filePath: url,
          success: function (res) {
            console.log(res)
            if (res.statusCode == 200) {
              //返回结果 此处需要按接口实际返回进行修改
              let d = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
              //判断code，以实际接口规范判断
              if (d.code % 100 === 0) {
                // 上传成功 d.url 为上传后图片地址，以实际接口返回为准
                if (d.url) {
                  let value = `imageList[${index}]`
                  _this.setData({
                    [value]: d.url
                  })
                }
                _this.setData({
                  [status]: d.url ? "1" : "3"
                })
              } else {
                // 上传失败
                _this.setData({
                  [status]: "3"
                })
              }
              resolve(index)
            } else {
              _this.setData({
                [status]: "3"
              })
              reject(index)
            }
          },
          fail: function (res) {
            _this.setData({
              [status]: "3"
            })
            reject(index)
          }
        })
      })

    },
    delImage: function (e) {
      let index = Number(e.currentTarget.dataset.index)

      let imgList = [...this.data.imageList]
      let status = [...this.data.statusArr]
      imgList.splice(index, 1)
      status.splice(index, 1)
      this.setData({
        imageList: imgList,
        statusArr: status
      })
      this.triggerEvent("remove", {
        index: index
      })
      this.change()
    },
    previewImage: function (e) {
      let index = Number(e.currentTarget.dataset.index)
      if (!this.data.imageList.length) return;
      wx.previewImage({
        current: this.data.imageList[index],
        loop: true,
        urls: this.data.imageList
      })
    }
  }
})