@10yun/cv-mobile-ui 0.5.29 → 0.5.30

package/ui-fireui/fui-upload/fui-upload.vue

@@ -0,0 +1,446 @@
+<template>
+  <view class="fui-container">
+    <view class="fui-upload-box">
+      <view class="fui-image-item" v-for="(item, index) in imageList" :key="index">
+        <image :src="item" class="fui-item-img" @tap.stop="previewImage(index)" mode="aspectFill"></image>
+        <view v-if="!forbidDel" class="fui-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="fui-upload-mask">
+          <view class="fui-upload-loading" v-if="statusArr[index] == 2"></view>
+          <text class="fui-tips">{{ statusArr[index] == 2 ? '上传中...' : '上传失败' }}</text>
+          <view
+            class="fui-mask-btn"
+            v-if="statusArr[index] == 3"
+            @tap.stop="reUpLoad(index)"
+            hover-class="fui-btn-hover"
+            :hover-stay-time="150"
+          >
+            重新上传
+          </view>
+        </view>
+      </view>
+      <view v-if="isShowAdd" class="fui-upload-add" @tap="chooseImage">
+        <uni-icons type="camera" size="30" color="#00AFC7"></uni-icons>
+        <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="fui-upload-icon fui-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;
+}
+
+.fui-upload-icon {
+  font-family: 'fuiUpload' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 10rpx;
+}
+
+.fui-icon-delete:before {
+  content: '\e601';
+}
+
+.fui-icon-plus:before {
+  content: '\e609';
+}
+
+.fui-upload-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fui-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;
+}
+.fui-image-item {
+  width: 178rpx;
+  height: 178rpx;
+  position: relative;
+  /* margin-right: 20rpx; */
+  margin-right: 10rpx;
+  margin-bottom: 20rpx;
+  border-radius: 18rpx;
+}
+
+.fui-image-item:nth-of-type(3n) {
+  margin-right: 0;
+}
+
+.fui-item-img {
+  width: 178rpx;
+  height: 178rpx;
+  display: block;
+  border-radius: 18rpx;
+}
+
+.fui-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;
+}
+
+/* .fui-img-del::before {
+	content: '';
+	width: 16rpx;
+	height: 1px;
+	position: absolute;
+	left: 10rpx;
+	top: 18rpx;
+	background-color: #fff;
+} */
+
+.fui-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);
+}
+
+.fui-upload-loading {
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50%;
+  border: 2px solid;
+  border-color: #b2b2b2 #b2b2b2 #b2b2b2 #fff;
+  animation: fui-rotate 0.7s linear infinite;
+}
+
+@keyframes fui-rotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.fui-tips {
+  font-size: 26rpx;
+  color: #fff;
+}
+
+.fui-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;
+}
+
+.fui-btn-hover {
+  opacity: 0.8;
+}
+</style>