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

package/uni-ui/lib/uni-file-picker/package.json

@@ -0,0 +1,105 @@
+{
+  "id": "uni-file-picker",
+  "displayName": "uni-file-picker 文件选择上传",
+  "version": "1.1.2",
+  "description": "文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "图片上传",
+    "文件上传"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "",
+    "uni-app": "^4.33",
+    "uni-app-x": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue",
+    "darkmode": "x",
+    "i18n": "x",
+    "widescreen": "x"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-scss"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "√",
+        "aliyun": "√",
+        "alipay": "√"
+      },
+      "client": {
+        "uni-app": {
+          "vue": {
+            "vue2": "√",
+            "vue3": "√"
+          },
+          "web": {
+            "safari": "√",
+            "chrome": "√"
+          },
+          "app": {
+            "vue": "√",
+            "nvue": "-",
+            "android": "√",
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "√",
+            "alipay": "√",
+            "toutiao": "√",
+            "baidu": "√",
+            "kuaishou": "√",
+            "jd": "-",
+            "harmony": "-",
+            "qq": "√",
+            "lark": "-"
+          },
+          "quickapp": {
+            "huawei": "√",
+            "union": "√"
+          }
+        },
+        "uni-app-x": {
+          "web": {
+            "safari": "-",
+            "chrome": "-"
+          },
+          "app": {
+            "android": "-",
+            "ios": "-",
+            "harmony": "-"
+          },
+          "mp": {
+            "weixin": "-"
+          }
+        }
+      }
+    }
+  }
+}

package/uni-ui/lib/uni-file-picker/readme.md

@@ -0,0 +1,10 @@
+
+## FilePicker 文件选择上传
+
+> **组件名：uni-file-picker**
+>  代码块： `uFilePicker`
+
+
+文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-file-picker)

package/uni-ui/lib/uni-file-picker/uni-file-picker.vue

@@ -17,10 +17,8 @@
       @delFile="delFile"
     >
       <slot>
-        <view class="is-add">
-          <view class="icon-add"></view>
-          <view class="icon-add rotate"></view>
-        </view>
+        <view class="icon-add"></view>
+        <view class="icon-add rotate"></view>
       </slot>
     </upload-image>
     <upload-file
@@ -38,6 +36,7 @@
     </upload-file>
   </view>
 </template>
+
 <script>
 import { chooseAndUploadFile, uploadCloudFiles } from './choose-and-upload-file.js';
 import { get_file_ext, get_extname, get_files_and_is_max, get_file_info, get_file_data } from './utils.js';
@@ -96,22 +95,18 @@ export default {
   },
   emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'],
   props: {
-    // #ifdef VUE3
     modelValue: {
       type: [Array, Object],
       default() {
         return [];
       }
     },
-    // #endif
-    // #ifndef VUE3
     value: {
       type: [Array, Object],
       default() {
         return [];
       }
     },
-    // #endif
     disabled: {
       type: Boolean,
       default: false
@@ -196,6 +191,10 @@ export default {
       default() {
         return ['album', 'camera'];
       }
+    },
+    provider: {
+      type: String,
+      default: '' // 默认上传到 unicloud 内置存储 extStorage 扩展存储
     }
   },
   data() {
@@ -205,22 +204,18 @@ export default {
     };
   },
   watch: {
-    // #ifndef VUE3
     value: {
       handler(newVal, oldVal) {
         this.setValue(newVal, oldVal);
       },
       immediate: true
     },
-    // #endif
-    // #ifdef VUE3
     modelValue: {
       handler(newVal, oldVal) {
         this.setValue(newVal, oldVal);
       },
       immediate: true
     }
-    // #endif
   },
   computed: {
     filesList() {
@@ -331,6 +326,7 @@ export default {
       let filesData = Object.keys(newVal).length > 0 ? newVal : [];
       this.files = [].concat(filesData);
     },
+
     /**
      * 选择文件
      */
@@ -345,6 +341,7 @@ export default {
       }
       this.chooseFiles();
     },
+
     /**
      * 选择文件并上传
      */
@@ -372,6 +369,7 @@ export default {
           console.log('选择失败', err);
         });
     },
+
     /**
      * 选择文件回调
      * @param {Object} res
@@ -383,11 +381,13 @@ export default {
       if (is_one) {
         this.files = [];
       }
+
       let { filePaths, files } = get_files_and_is_max(res, _extname);
       if (!(_extname && _extname.length > 0)) {
         filePaths = res.tempFilePaths;
         files = res.tempFiles;
       }
+
       let currentData = [];
       for (let i = 0; i < files.length; i++) {
         if (this.limitLength - this.files.length <= 0) break;
@@ -395,11 +395,13 @@ export default {
         let filedata = await get_file_data(files[i], this.fileMediatype);
         filedata.progress = 0;
         filedata.status = 'ready';
-        this.files.push(filedata);
-        currentData.push({
+        // fix by mehaotian ,统一返回，删除也包含file对象
+        let fileTempData = {
           ...filedata,
           file: files[i]
-        });
+        };
+        this.files.push(fileTempData);
+        currentData.push(fileTempData);
       }
       this.$emit('select', {
         tempFiles: currentData,
@@ -410,7 +412,15 @@ export default {
       if (!this.autoUpload || this.noSpace) {
         res.tempFiles = [];
       }
+      res.tempFiles.forEach((fileItem, index) => {
+        this.provider && (fileItem.provider = this.provider);
+        const fileNameSplit = fileItem.name.split('.');
+        const ext = fileNameSplit.pop();
+        const fileName = fileNameSplit.join('.').replace(/[\s\/\?<>\\:\*\|":]/g, '_');
+        fileItem.cloudPath = fileName + '_' + Date.now() + '_' + index + '.' + ext;
+      });
     },
+
     /**
      * 批传
      * @param {Object} e
@@ -429,6 +439,7 @@ export default {
           console.log(err);
         });
     },
+
     /**
      * 成功或失败
      */
@@ -440,6 +451,7 @@ export default {
       for (let i = 0; i < res.length; i++) {
         const item = res[i];
         const index = item.uuid ? this.files.findIndex((p) => p.uuid === item.uuid) : item.index;
+
         if (index === -1 || !this.files) break;
         if (item.errMsg === 'request:fail') {
           this.files[index].url = item.path;
@@ -457,12 +469,14 @@ export default {
           } else {
             this.files[index].url = item.url;
           }
+
           this.files[index].status = 'success';
           this.files[index].progress += 1;
           successData.push(this.files[index]);
           tempFilePath.push(this.files[index].fileID);
         }
       }
+
       if (successData.length > 0) {
         this.setEmit();
         // 状态改变返回
@@ -471,6 +485,7 @@ export default {
           tempFilePaths: tempFilePath
         });
       }
+
       if (errorData.length > 0) {
         this.$emit('fail', {
           tempFiles: this.backObject(errorData),
@@ -478,6 +493,7 @@ export default {
         });
       }
     },
+
     /**
      * 获取进度
      * @param {Object} progressEvent
@@ -502,12 +518,14 @@ export default {
         tempFile: this.files[idx]
       });
     },
+
     /**
      * 删除文件
      * @param {Object} index
      */
     delFile(index) {
       this.$emit('delete', {
+        index,
         tempFile: this.files[index],
         tempFilePath: this.files[index].url
       });
@@ -516,6 +534,7 @@ export default {
         this.setEmit();
       });
     },
+
     /**
      * 获取文件名和后缀
      * @param {Object} name
@@ -528,6 +547,7 @@ export default {
         ext: name.substring(last_len + 1, len)
       };
     },
+
     /**
      * 处理返回事件
      */
@@ -550,6 +570,7 @@ export default {
       this.$emit('input', this.localValue);
       // #endif
     },
+
     /**
      * 处理返回参数
      * @param {Object} files
@@ -597,6 +618,7 @@ export default {
   }
 };
 </script>
+
 <style>
 .uni-file-picker {
   /* #ifndef APP-NVUE */
@@ -606,6 +628,7 @@ export default {
   /* #endif */
   flex: 1;
 }
+
 .uni-file-picker__header {
   padding-top: 5px;
   padding-bottom: 10px;
@@ -614,27 +637,24 @@ export default {
   /* #endif */
   justify-content: space-between;
 }
+
 .file-title {
   font-size: 14px;
   color: #333;
 }
+
 .file-count {
   font-size: 14px;
   color: #999;
 }
-.is-add {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  align-items: center;
-  justify-content: center;
-}
+
 .icon-add {
   width: 50px;
   height: 5px;
   background-color: #f1f1f1;
   border-radius: 2px;
 }
+
 .rotate {
   position: absolute;
   transform: rotate(90deg);

package/uni-ui/lib/uni-file-picker/upload-file.vue

@@ -6,6 +6,7 @@
     <!-- :class="{'is-text-box':showType === 'list'}" -->
     <view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
       <!-- ,'is-list-card':showType === 'list-card' -->
+
       <view
         class="uni-file-picker__lists-box"
         v-for="(item, index) in list"
@@ -39,6 +40,7 @@
     </view>
   </view>
 </template>
+
 <script>
 export default {
   name: 'uploadFile',
@@ -134,6 +136,7 @@ export default {
           width = width.indexOf('px') ? width : width + 'px';
         }
         obj['border-width'] = width;
+
         if (typeof style === 'number') {
           style += 'px';
         } else {
@@ -148,6 +151,7 @@ export default {
       return classles;
     }
   },
+
   methods: {
     uploadFiles(item, index) {
       this.$emit('uploadFiles', {
@@ -173,5 +177,152 @@ export default {
 };
 </script>
 <style>
-@import 'style.css';
+.uni-file-picker__files {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.files-button {
+  /* border: 1px red solid; */
+}
+
+.uni-file-picker__lists {
+  position: relative;
+  margin-top: 5px;
+  overflow: hidden;
+}
+
+.file-picker__mask {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  color: #fff;
+  font-size: 14px;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.uni-file-picker__lists-box {
+  position: relative;
+}
+
+.uni-file-picker__item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+  padding: 8px 10px;
+  padding-right: 5px;
+  padding-left: 10px;
+}
+
+.files-border {
+  border-top: 1px #eee solid;
+}
+
+.files__name {
+  flex: 1;
+  font-size: 14px;
+  color: #666;
+  margin-right: 25px;
+  /* #ifndef APP-NVUE */
+  word-break: break-all;
+  word-wrap: break-word;
+  /* #endif */
+}
+
+.icon-files {
+  /* #ifndef APP-NVUE */
+  position: static;
+  background-color: initial;
+  /* #endif */
+}
+/*
+// .icon-files .icon-del {
+// 	background-color: #333;
+// 	width: 12px;
+// 	height: 1px;
+// }
+*/
+
+.is-list-card {
+  border: 1px #eee solid;
+  margin-bottom: 5px;
+  border-radius: 5px;
+  box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
+  padding: 5px;
+}
+
+.files__image {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+}
+
+.header-image {
+  width: 100%;
+  height: 100%;
+}
+
+.is-text-box {
+  border: 1px #eee solid;
+  border-radius: 5px;
+}
+
+.is-text-image {
+  width: 25px;
+  height: 25px;
+  margin-left: 5px;
+}
+
+.rotate {
+  position: absolute;
+  transform: rotate(90deg);
+}
+
+.icon-del-box {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  margin: auto 0;
+  /* #endif */
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0px;
+  bottom: 0;
+  right: 5px;
+  height: 26px;
+  width: 26px;
+  /* 
+  // border-radius: 50%;
+  // background-color: rgba(0, 0, 0, 0.5);
+  */
+  z-index: 2;
+  transform: rotate(-45deg);
+}
+
+.icon-del {
+  width: 15px;
+  height: 1px;
+  background-color: #333;
+  /* border-radius: 1px; */
+}
+
+/* #ifdef H5 */
+@media all and (min-width: 768px) {
+  .uni-file-picker__files {
+    max-width: 375px;
+  }
+}
+
+/* #endif */
 </style>

package/uni-ui/lib/uni-file-picker/upload-image.vue

@@ -20,14 +20,12 @@
     </view>
     <view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
       <view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
-        <slot>
-          <view class="icon-add"></view>
-          <view class="icon-add rotate"></view>
-        </slot>
+        <slot></slot>
       </view>
     </view>
   </view>
 </template>
+
 <script>
 export default {
   name: 'uploadImage',
@@ -93,6 +91,7 @@ export default {
         obj.height = this.value2px(height);
         obj['padding-top'] = 0;
       }
+
       if (width === 'auto') {
         if (height !== 'auto') {
           obj.width = this.value2px(height);
@@ -102,6 +101,7 @@ export default {
       } else {
         obj.width = this.value2px(width);
       }
+
       let classles = '';
       for (let i in obj) {
         classles += `${i}:${obj[i]};`;
@@ -153,6 +153,7 @@ export default {
       this.filesList.forEach((i) => {
         urls.push(i.url);
       });
+
       uni.previewImage({
         urls: urls,
         current: index
@@ -172,5 +173,106 @@ export default {
 };
 </script>
 <style>
-@import 'style.css';
+.uni-file-picker__container {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  box-sizing: border-box;
+  /* #endif */
+  flex-wrap: wrap;
+  margin: -5px;
+}
+
+.file-picker__box {
+  position: relative;
+  /* flex: 0 0 33.3%; */
+  width: 33.3%;
+  height: 0;
+  padding-top: 33.33%;
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}
+
+.file-picker__box-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 5px;
+  border: 1px #eee solid;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.file-picker__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  /* border: 1px red solid; */
+  z-index: 2;
+}
+
+.file-picker__progress-item {
+  width: 100%;
+}
+
+.file-picker__mask {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  color: #fff;
+  font-size: 12px;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.file-image {
+  width: 100%;
+  height: 100%;
+}
+
+.is-add {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+  justify-content: center;
+}
+
+.rotate {
+  position: absolute;
+  transform: rotate(90deg);
+}
+
+.icon-del-box {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  height: 26px;
+  width: 26px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+  transform: rotate(-45deg);
+}
+
+.icon-del {
+  width: 15px;
+  height: 2px;
+  background-color: #fff;
+  border-radius: 2px;
+}
 </style>