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

package/uview-plus/components/u-upload/file.js

@@ -0,0 +1,186 @@
+// 重构数据结构为双向映射，便于快速查找
+const MIME_MAPPINGS = (() => {
+  const mappings = {
+    // 图片格式
+    svg: ['image/svg+xml', 'image/svg'],
+    jpg: ['image/jpeg', 'image/jpg'],
+    jpeg: ['image/jpeg'],
+    png: ['image/png'],
+    gif: ['image/gif'],
+    webp: ['image/webp'],
+    bmp: ['image/bmp', 'image/x-bmp', 'image/x-ms-bmp'],
+    ico: ['image/x-icon', 'image/vnd.microsoft.icon'],
+    tiff: ['image/tiff', 'image/tif', 'image/x-tiff'],
+    apng: ['image/apng'],
+    avif: ['image/avif'],
+    heic: ['image/heic'],
+
+    // 文档格式
+    pdf: ['application/pdf'],
+    txt: ['text/plain'],
+    csv: ['text/csv'],
+    json: ['application/json'],
+    xml: ['application/xml'],
+
+    // Office 文档
+    doc: ['application/msword'],
+    docx: ['application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+    xls: ['application/vnd.ms-excel'],
+    xlsx: ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+    ppt: ['application/vnd.ms-powerpoint'],
+    pptx: ['application/vnd.openxmlformats-officedocument.presentationml.presentation'],
+
+    // 压缩文件
+    zip: ['application/zip'],
+    rar: ['application/x-rar-compressed'],
+    '7z': ['application/x-7z-compressed'],
+
+    // 音频/视频
+    mp3: ['audio/mpeg'],
+    mp4: ['video/mp4'],
+    mov: ['video/quicktime'],
+    avi: ['video/x-msvideo'],
+    wav: ['audio/wav']
+  };
+
+  // 创建双向映射
+  const extensionToMime = {};
+  const mimeToExtension = {};
+
+  for (const [ext, mimes] of Object.entries(mappings)) {
+    extensionToMime[ext] = mimes[0]; // 每个扩展名映射到第一个MIME类型
+
+    for (const mime of mimes) {
+      mimeToExtension[mime] = ext;
+    }
+  }
+  return { extensionToMime, mimeToExtension };
+})();
+/**
+ * 根据MIME类型获取文件扩展名
+ * @param {string} type - MIME类型（如 'image/jpeg'）
+ * @returns {string} 对应的文件扩展名（默认返回'jpg'）
+ */
+export function fileMimeToExtension(type) {
+  if (!type) return 'jpg';
+
+  const normalizedType = type.toLowerCase().trim();
+  return MIME_MAPPINGS.mimeToExtension[normalizedType] || 'jpg';
+}
+/**
+ * 根据文件扩展名获取MIME类型
+ * @param {string} ext - 文件扩展名（如 'jpg'）
+ * @returns {string} 对应的MIME类型（默认返回空字符串）
+ */
+export function fileExtensionToMime(ext) {
+  if (!ext) return '';
+  // 处理带点的情况（如 '.jpg'）
+  const normalizedExt = ext.replace(/^\./, '').toLowerCase();
+  return MIME_MAPPINGS.extensionToMime[normalizedExt] || '';
+}
+
+export function generateUniqidName() {
+  // 获取当前日期时间，格式化为 YYYYMMDDHHmmss
+  const now = new Date();
+  const datePart = [
+    now.getFullYear(),
+    String(now.getMonth() + 1).padStart(2, '0'),
+    String(now.getDate()).padStart(2, '0'),
+    String(now.getHours()).padStart(2, '0'),
+    String(now.getMinutes()).padStart(2, '0'),
+    String(now.getSeconds()).padStart(2, '0')
+  ].join('');
+
+  // 生成唯一ID部分（类似PHP的uniqid）
+  const uniquePart = Math.random().toString(36).substring(2, 10);
+
+  return datePart + uniquePart;
+}
+export function checkIsObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}
+export function parseJsonSafe(str) {
+  if (typeof str !== 'string') return {};
+  try {
+    const obj = JSON.parse(str);
+    return typeof obj === 'object' && obj !== null ? obj : {};
+  } catch {
+    return {};
+  }
+}
+
+export function parseFormData(data) {
+  let formData = {};
+  // let formData = new FormData();
+  formData['success_action_status'] = data.success_action_status || '200';
+  // formData['OSSAccessKeyId']= data.accessid;
+  formData['policy'] = data.policy;
+  formData['signature'] = data.signature;
+  formData['x-oss-signature'] = data.signature;
+  formData['x-oss-signature-version'] = 'OSS4-HMAC-SHA256';
+  formData['x-oss-credential'] = data.x_oss_credential;
+  formData['x-oss-date'] = data.x_oss_date;
+  formData['x-oss-security-token'] = data.security_token;
+  let full_key = data.key;
+  if (!data.key) {
+    full_key = data.dir + '/' + file.name;
+  }
+  formData['key'] = full_key; // 文件名
+  if (data.callback) {
+    // 添加回调参数
+    formData['callback'] = data.callback;
+  }
+  if (data.callback_var && checkIsObject(data.callback_var)) {
+    // headers['x-oss-callback-var'] = data.callback_var;
+    // 在POST请求的Body中使用表单域来携带参数
+
+    for (const key in data.callback_var) {
+      if (data.callback_var.hasOwnProperty(key)) {
+        // 确保是对象自身的属性，而非继承的
+        formData[key] = data.callback_var[key];
+      }
+    }
+    // formData['callback-var', data.callback_var);
+  }
+  // formData['file']= file; // file 必须为最后一个表单域
+  return formData;
+}
+function getFileInfo(imgStr) {
+  let index = imgStr.lastIndexOf('/');
+  let strName = imgStr.substring(index + 1, imgStr.length);
+  let strType = '';
+  if (strName.lastIndexOf('.') > -1) {
+    strType = strName.slice(strName.lastIndexOf('.') + 1);
+    strType = 'image/' + strType;
+  }
+  return {
+    name: strName,
+    url: imgStr,
+    type: strType,
+    status: 'success'
+  };
+}
+export function content_to_array(valDef) {
+  let existList = [];
+  let value_type1 = Object.prototype.toString.call(valDef);
+  if (value_type1 === '[object String]') {
+    existList.push(getFileInfo(valDef));
+  } else if (value_type1 === '[object Object]') {
+    if (valDef.name && valDef.url) {
+      existList.push(valDef);
+    }
+  } else if (value_type1 === '[object Array]') {
+    for (let i in valDef) {
+      let itemDef = valDef[i];
+      let value_type2 = Object.prototype.toString.call(itemDef);
+      if (value_type2 === '[object String]') {
+        existList.push(getFileInfo(itemDef));
+      } else if (value_type2 === '[object Object]') {
+        if (itemDef.name && itemDef.url) {
+          existList.push(itemDef);
+        }
+      }
+    }
+  }
+  return existList;
+}

package/uview-plus/components/u-upload/props-old.js

@@ -0,0 +1,176 @@
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
+  props: {
+    // 接受的文件类型, 可选值为all media image file video
+    accept: {
+      type: String,
+      default: () => defProps.upload.accept
+    },
+    extension: {
+      type: Array,
+      default: () => defProps.upload.extension
+    },
+    // 	图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头
+    capture: {
+      type: [String, Array],
+      default: () => defProps.upload.capture
+    },
+    // 当accept为video时生效，是否压缩视频，默认为true
+    compressed: {
+      type: Boolean,
+      default: () => defProps.upload.compressed
+    },
+    // 当accept为video时生效，可选值为back或front
+    camera: {
+      type: String,
+      default: () => defProps.upload.camera
+    },
+    // 当accept为video时生效，拍摄视频最长拍摄时间，单位秒
+    maxDuration: {
+      type: Number,
+      default: () => defProps.upload.maxDuration
+    },
+    // 上传区域的图标，只能内置图标
+    uploadIcon: {
+      type: String,
+      default: () => defProps.upload.uploadIcon
+    },
+    // 上传区域的图标的颜色，默认
+    uploadIconColor: {
+      type: String,
+      default: () => defProps.upload.uploadIconColor
+    },
+    // 是否开启文件读取前事件
+    useBeforeRead: {
+      type: Boolean,
+      default: () => defProps.upload.useBeforeRead
+    },
+    // 读取后的处理函数
+    afterRead: {
+      type: Function,
+      default: null
+    },
+    // 读取前的处理函数
+    beforeRead: {
+      type: Function,
+      default: null
+    },
+    // 是否显示组件自带的图片&视频预览功能
+    previewFullImage: {
+      type: Boolean,
+      default: () => defProps.upload.previewFullImage
+    },
+    // 最大上传数量
+    maxCount: {
+      type: [String, Number],
+      default: () => defProps.upload.maxCount
+    },
+    // 是否启用
+    disabled: {
+      type: Boolean,
+      default: () => defProps.upload.disabled
+    },
+    // 预览上传的图片时的裁剪模式，和image组件mode属性一致
+    imageMode: {
+      type: String,
+      default: () => defProps.upload.imageMode
+    },
+    // 标识符，可以在回调函数的第二项参数中获取
+    name: {
+      type: String,
+      default: () => defProps.upload.name
+    },
+    // 所选的图片的尺寸, 可选值为original compressed
+    sizeType: {
+      type: Array,
+      default: () => defProps.upload.sizeType
+    },
+    // 是否开启图片多选，部分安卓机型不支持
+    multiple: {
+      type: Boolean,
+      default: () => defProps.upload.multiple
+    },
+    // 是否展示删除按钮
+    deletable: {
+      type: Boolean,
+      default: () => defProps.upload.deletable
+    },
+    // 文件大小限制，单位为byte
+    maxSize: {
+      type: [String, Number],
+      default: () => defProps.upload.maxSize
+    },
+    // 显示已上传的文件列表
+    fileList: {
+      type: Array,
+      default: () => defProps.upload.fileList
+    },
+    // 上传区域的提示文字
+    uploadText: {
+      type: String,
+      default: () => defProps.upload.uploadText
+    },
+    // 内部预览图片区域和选择图片按钮的区域宽度
+    width: {
+      type: [String, Number],
+      default: () => defProps.upload.width
+    },
+    // 内部预览图片区域和选择图片按钮的区域高度
+    height: {
+      type: [String, Number],
+      default: () => defProps.upload.height
+    },
+    // 是否在上传完成后展示预览图
+    previewImage: {
+      type: Boolean,
+      default: () => defProps.upload.previewImage
+    },
+    // 是否自动删除
+    autoDelete: {
+      type: Boolean,
+      default: () => defProps.upload.autoDelete
+    },
+    // 是否自动上传需要传递action指定地址
+    autoUpload: {
+      type: Boolean,
+      default: () => defProps.upload.autoUpload
+    },
+    // 自动上传接口地址
+    autoUploadApi: {
+      type: String,
+      default: () => defProps.upload.autoUploadApi
+    },
+    // 自动上传驱动，local/oss/cos/kodo
+    autoUploadDriver: {
+      type: String,
+      default: () => defProps.upload.autoUploadDriver
+    },
+    // 自动上传授权接口，比如oss的签名接口。
+    autoUploadAuthUrl: {
+      type: String,
+      default: () => defProps.upload.autoUploadAuthUrl
+    },
+    // 自动上传携带的header
+    autoUploadHeader: {
+      type: Object,
+      default: () => {
+        return defProps.upload.autoUploadHeader;
+      }
+    },
+    // 本地计算视频封面
+    getVideoThumb: {
+      type: Boolean,
+      default: () => defProps.upload.getVideoThumb
+    },
+    // 自定义自动上传后处理
+    customAfterAutoUpload: {
+      type: Boolean,
+      default: () => defProps.upload.customAfterAutoUpload
+    },
+    videoPreviewObjectFit: {
+      type: String,
+      default: () => defProps.upload.videoPreviewObjectFit
+    }
+  }
+});

package/uview-plus/components/u-upload/props.js

@@ -2,6 +2,18 @@ import { defineMixin } from '../../libs/vue';
 import defProps from '../../libs/config/props.js';
 export const props = defineMixin({
   props: {
+    modelValue: {
+      type: [Number, String, Array],
+      default: ''
+    },
+    initValue: {
+      type: [String, Array],
+      default: ''
+    },
+    iconSize: {
+      type: [String, Number],
+      default: 12
+    },
     // 接受的文件类型, 可选值为all media image file video
     accept: {
       type: String,

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,14 @@ 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
+} from './file.js';
 /**
  * upload 上传
  * @description 该组件用于上传图片场景
@@ -204,10 +213,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 +249,59 @@ export default {
     }
   },
   // #ifdef VUE3
-  emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList', 'afterAutoUpload'],
+  emits: [
+    'error',
+    'beforeRead',
+    'oversize',
+    'afterRead',
+    'delete',
+    'clickPreview',
+    'update:modelValue',
+    '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 +361,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 +448,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 +494,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 +527,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 +536,31 @@ 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 || '');
                       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';
                     }