@10yun/cv-mobile-ui 0.5.62 → 0.5.63

package/ui-fireui/components/u-upload/u-upload.vue

@@ -1,446 +1,648 @@
-<template>
-  <view class="up-container">
-    <view class="up-upload-box">
-      <view class="up-image-item" v-for="(item, index) in imageList" :key="index">
-        <image :src="item" class="up-item-img" @tap.stop="previewImage(index)" mode="aspectFill"></image>
-        <view v-if="!forbidDel" class="up-img-del" @tap.stop="delImage(index)">
-          <image class="del-img" src="/static/images/share/icon_del.png" mode="widthFix"></image>
-        </view>
-        <view v-if="statusArr[index] != 1" class="up-upload-mask">
-          <view class="up-upload-loading" v-if="statusArr[index] == 2"></view>
-          <text class="up-tips">{{ statusArr[index] == 2 ? '上传中...' : '上传失败' }}</text>
-          <view
-            class="up-mask-btn"
-            v-if="statusArr[index] == 3"
-            @tap.stop="reUpLoad(index)"
-            hover-class="up-btn-hover"
-            :hover-stay-time="150"
-          >
-            重新上传
-          </view>
-        </view>
-      </view>
-      <view v-if="isShowAdd" class="up-upload-add" @tap="chooseImage">
-        <uni-icons type="camera" size="30" color="#00AFC7" />
-        <view class="" style="font-size: 24rpx; margin-top: 20rpx">添加</view>
-        <!-- <image class="add-img" src="/static/images/share/ad.png" mode="widthFix"></image> -->
-        <!-- <view class="up-upload-icon up-icon-plus"></view> -->
-      </view>
-    </view>
-  </view>
-</template>
-<script>
-export default {
-  name: 'fuiUpload',
-  props: {
-    //初始化图片路径
-    value: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    //禁用删除
-    forbidDel: {
-      type: Boolean,
-      default: false
-    },
-    //禁用添加
-    forbidAdd: {
-      type: Boolean,
-      default: false
-    },
-    //服务器地址
-    serverUrl: {
-      type: String,
-      default: ''
-    },
-    //限制数
-    limit: {
-      type: Number,
-      default: 9
-    },
-    //original 原图，compressed 压缩图，默认二者都有
-    sizeType: {
-      type: Array,
-      default() {
-        return ['original', 'compressed'];
-      }
-    },
-    //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
-    sourceType: {
-      type: Array,
-      default() {
-        return ['album', 'camera'];
-      }
-    },
-    //可上传图片类型，默认为空，不限制  Array<String> ['jpg','png','gif']
-    imageFormat: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    //单张图片大小限制 MB
-    size: {
-      type: Number,
-      default: 4
-    },
-    //项目名，默认为 file
-    fileKeyName: {
-      type: String,
-      default: 'file'
-    },
-    //HTTP 请求 Header, header 中不能设置 Referer。
-    header: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    //HTTP 请求中其他额外的 form data
-    formData: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {
-      //图片地址
-      imageList: [],
-      //上传状态：1-上传成功 2-上传中 3-上传失败
-      statusArr: []
-    };
-  },
-  created() {
-    this.initImages();
-  },
-  watch: {
-    value(val) {
-      console.log('监听', val);
-      if (val) {
-        this.initImages();
-      }
-    }
-  },
-  computed: {
-    isShowAdd() {
-      let isShow = true;
-      if (this.forbidAdd || (this.limit && this.imageList.length >= this.limit)) {
-        isShow = false;
-      }
-      return isShow;
-    }
-  },
-  methods: {
-    initImages() {
-      this.imageList = [...this.value];
-      for (let item of this.imageList) {
-        this.statusArr.push('1');
-      }
-    },
-    // 重新上传
-    reUpLoad(index) {
-      this.statusArr[index] = '2';
-      this.change();
-      this.uploadImage(index, this.imageList[index])
-        .then(() => {
-          this.change();
-        })
-        .catch(() => {
-          this.change();
-        });
-    },
-    change() {
-      let status = ~this.statusArr.indexOf('2') ? 2 : 1;
-      if (status != 2 && ~this.statusArr.indexOf('3')) {
-        // 上传失败
-        status = 3;
-      }
-      this.$emit('complete', {
-        status: status,
-        imgArr: this.imageList
-      });
-    },
-    chooseImage() {
-      uni.chooseImage({
-        count: this.limit - this.imageList.length,
-        sizeType: this.sizeType,
-        sourceType: this.sourceType,
-        success: (e) => {
-          let imageArr = [];
-          for (let i = 0; i < e.tempFiles.length; i++) {
-            let len = this.imageList.length;
-            if (len >= this.limit) {
-              this.showToast(`最多可上传${this.limit}张图片`);
-              break;
-            }
-            //过滤图片类型
-            let path = e.tempFiles[i].path;
-
-            if (this.imageFormat.length > 0) {
-              let format = '';
-              // #ifdef H5
-              let type = e.tempFiles[i].type;
-              format = type.split('/')[1];
-              // #endif
-
-              // #ifndef H5
-              format = path.split('.')[path.split('.').length - 1];
-              // #endif
-
-              if (this.imageFormat.indexOf(format) == -1) {
-                let text = `只能上传 ${this.imageFormat.join(',')} 格式图片！`;
-                this.showToast(text);
-                continue;
-              }
-            }
-
-            //过滤超出大小限制图片
-            let size = e.tempFiles[i].size;
-
-            if (this.size * 1024 * 1024 < size) {
-              let err = `单张图片大小不能超过：${this.size}MB`;
-              this.showToast(err);
-              continue;
-            }
-            imageArr.push(path);
-            this.imageList.push(path);
-            this.statusArr.push('2');
-          }
-          // this.change();
-
-          let start = this.imageList.length - imageArr.length;
-          for (let j = 0; j < imageArr.length; j++) {
-            let index = start + j;
-            //服务器地址
-            if (this.serverUrl) {
-              this.uploadImage(index, imageArr[j])
-                .then(() => {
-                  this.change();
-                })
-                .catch(() => {
-                  this.change();
-                });
-            } else {
-              //无服务器地址则直接返回成功
-              this.statusArr[index] = '1';
-              this.change();
-            }
-          }
-        }
-      });
-    },
-    // return httpObj.flagPost('API_FILE_FILE_UPLOAD', data)
-    uploadImage(index, url) {
-      return new Promise((resolve, reject) => {
-        uni.uploadFile({
-          url: this.serverUrl,
-          name: this.fileKeyName,
-          header: this.header,
-          formData: this.formData,
-          filePath: url,
-          success: (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 为上传后图片地址，以实际接口返回为准
-                d.url && (this.imageList[index] = d.url);
-                this.statusArr[index] = d.url ? '1' : '3';
-              } else {
-                // 上传失败
-                this.statusArr[index] = '3';
-              }
-              resolve(index);
-            } else {
-              this.statusArr[index] = '3';
-
-              reject(index);
-            }
-          },
-          fail: (res) => {
-            this.statusArr[index] = '3';
-            reject(index);
-          }
-        });
-      });
-    },
-    delImage(index) {
-      this.imageList.splice(index, 1);
-      this.statusArr.splice(index, 1);
-      this.$emit('remove', {
-        index: index
-      });
-      this.change();
-    },
-    previewImage(index) {
-      if (!this.imageList.length) return;
-      uni.previewImage({
-        current: this.imageList[index],
-        loop: true,
-        urls: this.imageList
-      });
-    }
-  }
-};
-</script>
-
-<style scoped>
-@font-face {
-  font-family: 'fuiUpload';
-  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATcAA0AAAAAByQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEwAAAABoAAAAciR52BUdERUYAAASgAAAAHgAAAB4AKQALT1MvMgAAAaAAAABCAAAAVjxvR/tjbWFwAAAB+AAAAEUAAAFK5ibpuGdhc3AAAASYAAAACAAAAAj//wADZ2x5ZgAAAkwAAADXAAABAAmNjcZoZWFkAAABMAAAAC8AAAA2FpiS+WhoZWEAAAFgAAAAHQAAACQH3QOFaG10eAAAAeQAAAARAAAAEgwAACBsb2NhAAACQAAAAAwAAAAMAEoAgG1heHAAAAGAAAAAHwAAACABEgA2bmFtZQAAAyQAAAFJAAACiCnmEVVwb3N0AAAEcAAAACgAAAA6OMUs4HjaY2BkYGAAYo3boY/i+W2+MnCzMIDAzb3qdQj6fwPzf+YGIJeDgQkkCgA/KAtvAHjaY2BkYGBu+N/AEMPCAALM/xkYGVABCwBZ4wNrAAAAeNpjYGRgYGBl0GJgZgABJiDmAkIGhv9gPgMADTABSQB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ9xMjf8b2CIYW5gaAAKM4LkANt9C+UAAHjaY2GAABYIVmBgAAAA+gAtAAAAeNpjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYnjE+4/z/n4EBQksxSf6GqgcCRjYGOIeRCUgwMaACRoZhDwCiLwmoAAAAAAAAAAAAAAAASgCAeNpdjkFKw0AARf/vkIR0BkPayWRKQZtYY90ohJju2kOIbtz0KD1HVm50UfEmWXoAr9ADOHFARHHzeY//Fx8Ci+FJfIgdJFa4AhgiMshbrCuIsLxhFJZVs+Vl1bT1GddtbXTC3OhohN4dg4BJ3zMJAnccyfm468ZzHXddrH9ZKbHzdf9n/vkY/xv9sPQXgGEvBrHHwst5kTbXLE+YpYVPkxepPmW94W16UbdNJd6f3SAzo5W7m1jaKd+8ZZIvk5nlKw9SK6Wle7BLS3f/bTzQLmfAF2T1NsQAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMxsKak5qSWpbFmZiRmJ+QAmgAUIAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9M296nUwGgA+8QYgAAA=)
-    format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-.up-upload-icon {
-  font-family: 'fuiUpload' !important;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  padding: 10rpx;
-}
-
-.up-icon-delete:before {
-  content: '\e601';
-}
-
-.up-icon-plus:before {
-  content: '\e609';
-}
-
-.up-upload-box {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.up-upload-add {
-  /* width: 240rpx;
-    height: 240rpx; */
-  width: 178rpx;
-  height: 178rpx;
-  font-size: 68rpx;
-  font-weight: 100;
-  color: #888;
-  /* background-color: #fff; */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border-radius: 18rpx;
-}
-.add-img {
-  width: 60rpx;
-  height: 140rpx;
-}
-.del-img {
-  width: 36rpx;
-  height: 36rpx;
-}
-.up-image-item {
-  width: 178rpx;
-  height: 178rpx;
-  position: relative;
-  /* margin-right: 20rpx; */
-  margin-right: 10rpx;
-  margin-bottom: 20rpx;
-  border-radius: 18rpx;
-}
-
-.up-image-item:nth-of-type(3n) {
-  margin-right: 0;
-}
-
-.up-item-img {
-  width: 178rpx;
-  height: 178rpx;
-  display: block;
-  border-radius: 18rpx;
-}
-
-.up-img-del {
-  width: 36rpx;
-  height: 36rpx;
-  position: absolute;
-  right: -12rpx;
-  top: -12rpx;
-  /* background-color: #333333; */
-  border-radius: 50%;
-  color: white;
-  font-size: 34rpx;
-  z-index: 999;
-}
-
-/* .up-img-del::before {
-	content: '';
-	width: 16rpx;
-	height: 1px;
-	position: absolute;
-	left: 10rpx;
-	top: 18rpx;
-	background-color: #fff;
-} */
-
-.up-upload-mask {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  padding: 40rpx 0;
-  box-sizing: border-box;
-  background-color: rgba(0, 0, 0, 0.6);
-}
-
-.up-upload-loading {
-  width: 28rpx;
-  height: 28rpx;
-  border-radius: 50%;
-  border: 2px solid;
-  border-color: #b2b2b2 #b2b2b2 #b2b2b2 #fff;
-  animation: up-rotate 0.7s linear infinite;
-}
-
-@keyframes up-rotate {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.up-tips {
-  font-size: 26rpx;
-  color: #fff;
-}
-
-.up-mask-btn {
-  padding: 4rpx 16rpx;
-  border-radius: 40rpx;
-  text-align: center;
-  font-size: 24rpx;
-  color: #fff;
-  border: 1rpx solid #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.up-btn-hover {
-  opacity: 0.8;
-}
-</style>
+<template>
+  <view class="up-upload__container">
+    <view class="up-upload-box">
+      <view
+        class="up-image-item"
+        :style="{ width: width + 'rpx', height: height + 'rpx', borderRadius: radius + 'rpx' }"
+        v-for="(item, index) in imageList"
+        :key="index"
+      >
+        <image
+          :src="item"
+          class="up-item-img"
+          :style="{ width: width + 'rpx', height: height + 'rpx', borderRadius: radius + 'rpx' }"
+          @tap.stop="previewImage(index)"
+          mode="aspectFill"
+        ></image>
+        <view v-if="!forbidDel" class="up-img-del" :style="{ background: getDelColor }" @tap.stop="delImage(index)"></view>
+        <view v-if="statusArr[index] != 1" class="up-upload-mask">
+          <view class="up-upload-loading" v-if="statusArr[index] == 2"></view>
+          <text class="up-tips">{{ statusArr[index] == 2 ? '上传中...' : '上传失败' }}</text>
+          <view
+            class="up-mask-btn"
+            v-if="statusArr[index] == 3"
+            @tap.stop="reUpLoad(index)"
+            hover-class="up-btn-hover"
+            :hover-stay-time="150"
+          >
+            重新上传
+          </view>
+        </view>
+      </view>
+      <view
+        v-if="isShowAdd"
+        class="up-upload-add"
+        :class="[borderColor !== 'transparent' ? 'up-upload__border' : 'up-upload__unborder']"
+        :style="{
+          width: width + 'rpx',
+          height: height + 'rpx',
+          background: background,
+          borderRadius: radius + 'rpx',
+          borderColor: borderColor,
+          borderStyle: borderSytle
+        }"
+        @tap="chooseImage"
+      >
+        <slot>
+          <view class="up-upload-icon up-icon-plus" :style="{ color: addColor, fontSize: addSize + 'rpx' }"></view>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'tuiUpload',
+  emits: ['remove', 'complete', 'reupload'],
+  props: {
+    //展示图片宽度
+    width: {
+      type: [Number, String],
+      default: 218
+    },
+    //展示图片高度
+    height: {
+      type: [Number, String],
+      default: 218
+    },
+    //初始化图片路径
+    value: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //2.3.0+
+    radius: {
+      type: [Number, String],
+      default: 0
+    },
+    //2.3.0+
+    background: {
+      type: String,
+      default: '#F7F7F7'
+    },
+    //2.3.0+
+    borderColor: {
+      type: String,
+      default: 'transparent'
+    },
+    //2.3.0+
+    //solid、dashed、dotted
+    borderSytle: {
+      type: String,
+      default: 'dashed'
+    },
+    //2.3.0+
+    delColor: {
+      type: String,
+      default: ''
+    },
+    //删除图片前是否弹框确认
+    delConfirm: {
+      type: Boolean,
+      default: false
+    },
+    //禁用删除
+    forbidDel: {
+      type: Boolean,
+      default: false
+    },
+    //V2.9.6+ 删除图片是否触发 @complete 事件
+    delTrigger: {
+      type: Boolean,
+      default: true
+    },
+    //2.3.0+
+    addColor: {
+      type: String,
+      default: '#888'
+    },
+    //2.3.0+
+    addSize: {
+      type: [Number, String],
+      default: 68
+    },
+    //禁用添加
+    forbidAdd: {
+      type: Boolean,
+      default: false
+    },
+    //服务器接口地址。当接口地址为空时，直接返回本地图片地址
+    serverUrl: {
+      type: String,
+      default: ''
+    },
+    //限制数
+    limit: {
+      type: Number,
+      default: 9
+    },
+    //original 原图，compressed 压缩图，默认二者都有
+    sizeType: {
+      type: Array,
+      default() {
+        return ['original', 'compressed'];
+      }
+    },
+    //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
+    sourceType: {
+      type: Array,
+      default() {
+        return ['album', 'camera'];
+      }
+    },
+    //可上传图片类型，默认为空，不限制  Array<String> ['jpg','png','gif']
+    imageFormat: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //单张图片大小限制 MB
+    size: {
+      type: Number,
+      default: 4
+    },
+    //文件对应的key，默认为 file
+    fileKeyName: {
+      type: String,
+      default: 'file'
+    },
+    //HTTP 请求 Header, header 中不能设置 Referer。
+    header: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    //HTTP 请求中其他额外的 form data
+    formData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    //自定义参数
+    params: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  data() {
+    return {
+      //图片地址
+      imageList: [],
+      tempFiles: [],
+      //上传状态：1-上传成功 2-上传中 3-上传失败
+      statusArr: [],
+      //传入回调函数上传
+      callUpload: false
+    };
+  },
+  created() {
+    this.initImages();
+  },
+  watch: {
+    value(val) {
+      if (val) {
+        this.initImages();
+      }
+    }
+  },
+  computed: {
+    isShowAdd() {
+      let isShow = true;
+      if (this.forbidAdd || (this.limit && this.imageList.length >= this.limit)) {
+        isShow = false;
+      }
+      return isShow;
+    },
+    getDelColor() {
+      return this.delColor || (uni && uni.$tui && uni.$tui.color.danger) || '#EB0909';
+    }
+  },
+  methods: {
+    initImages() {
+      this.statusArr = [];
+      this.imageList = [...this.value];
+      let tempFiles = [];
+      for (let item of this.imageList) {
+        this.statusArr.push('1');
+        tempFiles.push({
+          path: item
+        });
+      }
+      this.tempFiles = tempFiles;
+    },
+    // 重新上传
+    reUpLoad(index) {
+      this.$set(this.statusArr, index, '2');
+      this.$emit('reupload', {
+        index
+      });
+      if (!this.callUpload) {
+        this.uploadImage(index, this.imageList[index])
+          .then(() => {
+            this.change();
+          })
+          .catch(() => {
+            this.change();
+          });
+      }
+    },
+    /**
+     * @param manual 是否手动上传
+     **/
+    change(manual = false) {
+      let status = ~this.statusArr.indexOf('2') ? 2 : 1;
+      if (status != 2 && ~this.statusArr.indexOf('3')) {
+        // 上传失败
+        status = 3;
+      }
+      this.$emit('complete', {
+        status: status,
+        imgArr: this.imageList,
+        params: this.params,
+        manual: manual
+      });
+    },
+    toast(text) {
+      text &&
+        uni.showToast({
+          title: text,
+          icon: 'none'
+        });
+    },
+    chooseImage: function () {
+      let _this = this;
+      uni.chooseImage({
+        count: _this.limit - _this.imageList.length,
+        sizeType: _this.sizeType,
+        sourceType: _this.sourceType,
+        success: function (e) {
+          let imageArr = [];
+          for (let i = 0; i < e.tempFiles.length; i++) {
+            let len = _this.imageList.length;
+            if (len >= _this.limit) {
+              _this.toast(`最多可上传${_this.limit}张图片`);
+              break;
+            }
+            //过滤图片类型
+            let path = e.tempFiles[i].path;
+
+            if (_this.imageFormat.length > 0) {
+              let format = '';
+              // #ifdef H5
+              let type = e.tempFiles[i].type;
+              format = type.split('/')[1];
+              // #endif
+
+              // #ifndef H5
+              format = path.split('.')[path.split('.').length - 1];
+              // #endif
+
+              if (_this.imageFormat.indexOf(format) == -1) {
+                let text = `只能上传 ${_this.imageFormat.join(',')} 格式图片！`;
+                _this.toast(text);
+                continue;
+              }
+            }
+
+            //过滤超出大小限制图片
+            let size = e.tempFiles[i].size;
+
+            if (_this.size * 1024 * 1024 < size) {
+              let err = `单张图片大小不能超过：${_this.size}MB`;
+              _this.toast(err);
+              continue;
+            }
+            imageArr.push(path);
+            _this.imageList.push(path);
+            _this.tempFiles.push(e.tempFiles[i]);
+            _this.statusArr.push('2');
+          }
+          _this.change();
+
+          let start = _this.imageList.length - imageArr.length;
+          for (let j = 0; j < imageArr.length; j++) {
+            let index = start + j;
+            //服务器地址
+            if (_this.serverUrl) {
+              _this
+                .uploadImage(index, imageArr[j])
+                .then(() => {
+                  _this.change();
+                })
+                .catch(() => {
+                  _this.change();
+                });
+            } else {
+              //无服务器地址则直接返回成功
+              _this.$set(_this.statusArr, index, '1');
+              _this.change();
+            }
+          }
+        }
+      });
+    },
+    uploadImage: function (index, url, serverUrl) {
+      let _this = this;
+      return new Promise((resolve, reject) => {
+        uni.uploadFile({
+          url: this.serverUrl || serverUrl,
+          name: this.fileKeyName,
+          header: this.header,
+          formData: this.formData,
+          filePath: url,
+          success: function (res) {
+            if (res.statusCode == 200) {
+              //返回结果 此处需要按接口实际返回进行修改
+              let d = JSON.parse(res.data.replace(/\ufeff/g, '') || '{}');
+              //判断code，以实际接口规范判断
+              if (d.code % 100 === 0) {
+                // 上传成功 d.url 为上传后图片地址，以实际接口返回为准
+                d.url && (_this.imageList[index] = d.url);
+                _this.$set(_this.statusArr, index, d.url ? '1' : '3');
+              } else {
+                // 上传失败
+                _this.$set(_this.statusArr, index, '3');
+              }
+              resolve(index);
+            } else {
+              _this.$set(_this.statusArr, index, '3');
+              reject(index);
+            }
+          },
+          fail: function (res) {
+            _this.$set(_this.statusArr, index, '3');
+            reject(index);
+          }
+        });
+      });
+    },
+    delImage: function (index) {
+      let that = this;
+      if (this.delConfirm) {
+        uni.showModal({
+          title: '提示',
+          content: '确认删除该图片吗？',
+          showCancel: true,
+          cancelColor: '#555',
+          confirmColor: '#eb0909',
+          confirmText: '确定',
+          success(res) {
+            if (res.confirm) {
+              that.imageList.splice(index, 1);
+              that.tempFiles.splice(index, 1);
+              that.statusArr.splice(index, 1);
+              that.$emit('remove', {
+                index: index,
+                params: that.params
+              });
+              that.delTrigger && that.change();
+            }
+          }
+        });
+      } else {
+        that.imageList.splice(index, 1);
+        that.tempFiles.splice(index, 1);
+        that.statusArr.splice(index, 1);
+        that.$emit('remove', {
+          index: index,
+          params: that.params
+        });
+        that.delTrigger && that.change();
+      }
+    },
+    previewImage: function (index) {
+      if (!this.imageList.length) return;
+      uni.previewImage({
+        current: this.imageList[index],
+        loop: true,
+        urls: this.imageList
+      });
+    },
+    /**
+     * 当属性serverUrl传空时，父级调用该方法一次性上传所有图片
+     * @param serverUrl 服务器接口地址
+     **/
+    uploadAllImage(serverUrl) {
+      if (!serverUrl) {
+        this.toast('服务器接口地址不能为空！');
+        return;
+      }
+      let imageArr = [...this.imageList];
+      const len = imageArr.length;
+      for (let i = 0; i < len; i++) {
+        //如果是服务器地址图片则无需再次上传
+        if (imageArr[i].startsWith('https')) {
+          continue;
+        } else {
+          this.$set(this.statusArr, i, '2');
+          this.uploadImage(i, imageArr[i], serverUrl)
+            .then(() => {
+              if (i === len - 1) {
+                this.change(true);
+              }
+            })
+            .catch(() => {
+              if (i === len - 1) {
+                this.change(true);
+              }
+            });
+        }
+      }
+    },
+    upload(callback, index) {
+      // 传入一个返回Promise的文件上传的函数
+      //上传状态：1-上传成功 2-上传中 3-上传失败
+      this.callUpload = true;
+      if (index === undefined || index === null) {
+        let urls = [...this.imageList];
+        const len = urls.length;
+        for (let i = 0; i < len; i++) {
+          if (urls[i].startsWith('https')) {
+            continue;
+          } else {
+            this.$set(this.statusArr, i, '2');
+            if (typeof callback === 'function') {
+              callback(this.tempFiles[i])
+                .then((res) => {
+                  this.$set(this.statusArr, i, '1');
+                  this.imageList[i] = res;
+                  this.change(true);
+                })
+                .catch((err) => {
+                  this.$set(this.statusArr, i, '3');
+                });
+            }
+          }
+        }
+      } else {
+        //如果传入index，则是重新上传时调用
+        this.$set(this.statusArr, index, '2');
+        if (typeof callback === 'function') {
+          callback(this.tempFiles[index])
+            .then((res) => {
+              this.$set(this.statusArr, index, '1');
+              this.imageList[index] = res;
+              this.change(true);
+            })
+            .catch((err) => {
+              this.$set(this.statusArr, index, '3');
+            });
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'tuiUpload';
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATcAA0AAAAAByQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEwAAAABoAAAAciR52BUdERUYAAASgAAAAHgAAAB4AKQALT1MvMgAAAaAAAABCAAAAVjxvR/tjbWFwAAAB+AAAAEUAAAFK5ibpuGdhc3AAAASYAAAACAAAAAj//wADZ2x5ZgAAAkwAAADXAAABAAmNjcZoZWFkAAABMAAAAC8AAAA2FpiS+WhoZWEAAAFgAAAAHQAAACQH3QOFaG10eAAAAeQAAAARAAAAEgwAACBsb2NhAAACQAAAAAwAAAAMAEoAgG1heHAAAAGAAAAAHwAAACABEgA2bmFtZQAAAyQAAAFJAAACiCnmEVVwb3N0AAAEcAAAACgAAAA6OMUs4HjaY2BkYGAAYo3boY/i+W2+MnCzMIDAzb3qdQj6fwPzf+YGIJeDgQkkCgA/KAtvAHjaY2BkYGBu+N/AEMPCAALM/xkYGVABCwBZ4wNrAAAAeNpjYGRgYGBl0GJgZgABJiDmAkIGhv9gPgMADTABSQB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ9xMjf8b2CIYW5gaAAKM4LkANt9C+UAAHjaY2GAABYIVmBgAAAA+gAtAAAAeNpjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYnjE+4/z/n4EBQksxSf6GqgcCRjYGOIeRCUgwMaACRoZhDwCiLwmoAAAAAAAAAAAAAAAASgCAeNpdjkFKw0AARf/vkIR0BkPayWRKQZtYY90ohJju2kOIbtz0KD1HVm50UfEmWXoAr9ADOHFARHHzeY//Fx8Ci+FJfIgdJFa4AhgiMshbrCuIsLxhFJZVs+Vl1bT1GddtbXTC3OhohN4dg4BJ3zMJAnccyfm468ZzHXddrH9ZKbHzdf9n/vkY/xv9sPQXgGEvBrHHwst5kTbXLE+YpYVPkxepPmW94W16UbdNJd6f3SAzo5W7m1jaKd+8ZZIvk5nlKw9SK6Wle7BLS3f/bTzQLmfAF2T1NsQAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMxsKak5qSWpbFmZiRmJ+QAmgAUIAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9M296nUwGgA+8QYgAAA=)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.up-upload-icon {
+  font-family: 'tuiUpload' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 10rpx;
+}
+
+.up-icon-delete:before {
+  content: '\e601';
+}
+
+.up-icon-plus:before {
+  content: '\e609';
+}
+
+.up-upload-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.up-upload-add {
+  font-weight: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.up-upload__unborder {
+  border-width: 0;
+}
+
+.up-upload__border {
+  border-width: 1px;
+}
+
+.up-image-item {
+  position: relative;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+  flex-shrink: 0;
+}
+
+.up-item-img {
+  display: block;
+}
+
+.up-img-del {
+  width: 36rpx;
+  height: 36rpx;
+  position: absolute;
+  right: -12rpx;
+  top: -12rpx;
+  border-radius: 50%;
+  color: white;
+  font-size: 34rpx;
+  z-index: 5;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.up-img-del::before {
+  content: '';
+  width: 16rpx;
+  height: 1px;
+  position: absolute;
+  left: 10rpx;
+  top: 18rpx;
+  background-color: #fff;
+}
+
+.up-upload-mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40rpx 0;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 3;
+}
+
+.up-upload-loading {
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50%;
+  border: 2px solid;
+  border-color: #b2b2b2 #b2b2b2 #b2b2b2 #fff;
+  animation: up-rotate 0.7s linear infinite;
+}
+
+@keyframes up-rotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.up-tips {
+  font-size: 26rpx;
+  color: #fff;
+}
+
+.up-mask-btn {
+  padding: 4rpx 16rpx;
+  border-radius: 40rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #fff;
+  border: 1px solid #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 26rpx;
+}
+
+.up-btn-hover {
+  opacity: 0.8;
+}
+</style>