@10yun/cv-mobile-ui 0.5.57 → 0.5.59

package/uview-plus/components/u-upload/u-upload.vue

@@ -82,21 +82,22 @@
           </view>
           <view
             class="u-upload__deletable"
+            :style="iconDelStyle"
             v-if="item.status !== 'uploading' && (deletable || item.deletable)"
             @tap.stop="deleteItem(index)"
           >
             <view class="u-upload__deletable__icon">
-              <up-icon name="close" color="#ffffff" size="10"></up-icon>
+              <up-icon name="close" color="#ffffff" :size="iconSize"></up-icon>
             </view>
           </view>
           <slot name="success">
-            <view class="u-upload__success" v-if="item.status === 'success'">
+            <view class="u-upload__success" :style="iconSuccStyle1" v-if="item.status === 'success'">
               <!-- #ifdef APP-NVUE -->
               <image :src="successIcon" class="u-upload__success__icon"></image>
               <!-- #endif -->
               <!-- #ifndef APP-NVUE -->
-              <view class="u-upload__success__icon">
-                <up-icon name="checkmark" color="#ffffff" size="12"></up-icon>
+              <view class="u-upload__success__icon" :style="iconSuccStyle2">
+                <up-icon name="checkmark" color="#ffffff" :size="iconSize"></up-icon>
               </view>
               <!-- #endif -->
             </view>
@@ -158,6 +159,15 @@ import { mixin } from '../../libs/mixin/mixin';
 import { addStyle, addUnit, toast } from '../../libs/function/index';
 import test from '../../libs/function/test';
 import { t } from '../../libs/i18n';
+import {
+  fileMimeToExtension,
+  checkIsObject,
+  generateUniqidName,
+  parseJsonSafe,
+  parseFormData,
+  content_to_array,
+  getFileInfo
+} from './file.js';
 /**
  * upload 上传
  * @description 该组件用于上传图片场景
@@ -204,10 +214,18 @@ export default {
       lists: [],
       isInCount: true,
       popupShow: false,
-      currentItemIndex: -1
+      currentItemIndex: -1,
+      localList: []
     };
   },
   watch: {
+    initValue: {
+      handler() {
+        this._init_parse_list();
+      },
+      immediate: true,
+      deep: true
+    },
     // 监听文件列表的变化，重新整理内部数据
     fileList: {
       handler() {
@@ -232,12 +250,60 @@ export default {
     }
   },
   // #ifdef VUE3
-  emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList', 'afterAutoUpload'],
+  emits: [
+    'error',
+    'beforeRead',
+    'oversize',
+    'afterRead',
+    'delete',
+    'clickPreview',
+    'update:modelValue',
+    'update:initValue',
+    'update:fileList',
+    'afterAutoUpload'
+  ],
   // #endif
+  computed: {
+    // 去除 单位
+    iconSizeNum() {
+      let size = this.iconSize || 0; // 空值给默认 0
+      //  if (typeof this.iconSize === 'string' && (this.iconSize.includes('px') || this.iconSize.includes('rpx'))) {
+      if (typeof size === 'string') {
+        size = size.replace(/[^0-9.]/g, '');
+      }
+      return parseFloat(size) || 0;
+    },
+    iconDelStyle() {
+      return {
+        height: this.iconSizeNum + 4 + 'px',
+        width: this.iconSizeNum + 4 + 'px'
+      };
+    },
+    iconSuccStyle1() {
+      return {
+        'border-width': this.iconSizeNum - 5 + 'px'
+      };
+    },
+    iconSuccStyle2() {
+      return {
+        bottom: -(this.iconSizeNum - 3) + 'px',
+        right: -(this.iconSizeNum - 3) + 'px'
+      };
+    }
+  },
   methods: {
     t,
     addUnit,
     addStyle,
+    _init_parse_list() {
+      if (this.initValue) {
+        this.localList = content_to_array(this.initValue);
+      } else {
+        this.localList = [];
+      }
+      console.log('---localList--', this.localList);
+      this.formatFileList();
+    },
     videoErrorCallback() {},
     loadedVideoMetadata(e) {
       if (this.currentItemIndex < 0) {
@@ -297,9 +363,12 @@ export default {
         })
         .exec();
     },
+
     formatFileList() {
-      const { fileList = [], maxCount } = this;
-      const lists = fileList.map((item) => {
+      const { fileList = [], localList = [], maxCount } = this;
+      const fileList2 = localList || fileList || [];
+      const lists = fileList2.map((item) => {
+        // const lists = fileList.map((item) => {
         const name = item.name || item.url || item.thumb;
         return Object.assign(Object.assign({}, item), {
           // 如果item.url为本地选择的blob文件的话，无法判断其为video还是image，此处优先通过accept做判断处理
@@ -381,6 +450,7 @@ export default {
         index: index == null ? this.fileList.length : index
       };
     },
+
     async onAfterRead(file) {
       const { maxSize, afterRead } = this;
       const oversize = Array.isArray(file) ? file.some((item) => item.size > maxSize) : file.size > maxSize;
@@ -426,23 +496,31 @@ export default {
             case 'upload_oss':
               // 阿里云前端直传
               // 获取签名
-              console.log();
               let formData = {};
+              let save_name = generateUniqidName();
+              let extension = fileMimeToExtension(lists[j].type);
+              // console.log('---lists[j]--', lists[j]);
               let ret = await uni.request({
                 url: this.autoUploadAuthUrl,
-                method: 'get',
+                method: 'post',
                 header: this.autoUploadHeader,
                 data: {
-                  filename: lists[j].name
+                  upload_type: 'aliyun_oss_type2',
+                  save_sign: 'image',
+                  filename: lists[j].name,
+                  save_extension: extension,
+                  save_name: save_name
                 }
               });
               // console.log(ret);
               let res0 = ret.data;
+              let res0Param = {};
               if (res0.code == 200) {
                 // 路径 + 文件名 + 扩展名
                 // 不传递filename就要拼接key
                 // res0.data.params.key = res0.data.params.dir + res0.data.params.uniqidName + fileExt;
-                formData = res0.data.params;
+                res0Param = res0.data.params || res0.data;
+                formData = parseFormData(res0Param);
               } else {
                 uni.showToast({
                   title: res0.msg,
@@ -451,7 +529,7 @@ export default {
                 return;
               }
               var uploadTask = uni.uploadFile({
-                url: res0.data.params.host,
+                url: res0Param.host,
                 filePath: lists[j].url,
                 name: 'file',
                 // fileType: 'video', // 仅支付宝小程序，且必填。
@@ -460,22 +538,33 @@ export default {
                 success: (uploadFileRes) => {
                   let thumb = '';
                   let afterPromise = '';
+                  let res1 = parseJsonSafe(uploadFileRes?.data || {});
                   if (that.customAfterAutoUpload) {
                     afterPromise = new Promise((resolve, reject) => {
+                      let res2 = res1?.data || res1 || {};
+                      // TODO 判断是否多图，
+                      this.$emit('update:modelValue', res2.filelog_id || '');
+                      this.localList.push(getFileInfo(res2.cdn_full_path));
+                      this.formatFileList();
                       that.$emit(
                         'afterAutoUpload',
-                        Object.assign(res0, {
+                        Object.assign(res2, {
                           callback: (r) => {
                             r.url ? resolve(r) : reject();
                           }
                         })
+                        // Object.assign(res0, res1, {
+                        //   callback: (r) => {
+                        //     r.url ? resolve(r) : reject();
+                        //   }
+                        // })
                       );
                     });
                   }
                   if (test.promise(afterPromise)) {
                     afterPromise.then((data) => that.succcessUpload(len + j, data.url, data.thumb));
                   } else {
-                    result = res0.data.params.host + '/' + res0.data.params.key;
+                    result = res0Param.host + '/' + res0Param.key;
                     if (that.accept === 'video' || test.video(result)) {
                       thumb = result + '?x-oss-process=video/snapshot,t_10000,m_fast';
                     }
@@ -581,6 +670,9 @@ export default {
     },
     deleteItem(index) {
       if (this.autoDelete) {
+        this.localList.splice(index, 1);
+        this.$emit('update:initValue', this.localList);
+
         this.fileList.splice(index, 1);
         this.$emit('update:fileList', this.fileList);
       } else {