@10yun/cv-mobile-ui 0.5.53 → 0.5.55

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

@@ -1,446 +0,0 @@
-<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>