联调文件上传和图片上传控件

hookehuyr
Commit 9580bc4df0e2dcba81432550652f925a1e137cef 9580bc4d 1 parent c1b95a6b
Showing 2 changed files with 34 additions and 13 deletions
src/components/FileUploaderField/index.vue
src/components/ImageUploaderField/index.vue
--- a/src/components/FileUploaderField/index.vue
View file @9580bc4
+++ b/src/components/FileUploaderField/index.vue
View file @9580bc4
 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-21 14:54:30
+ * @LastEditTime: 2022-12-30 10:32:42
- * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
+ * @FilePath: /data-table/src/components/FileUploaderField/index.vue
  * @Description: 文件上传控件
 -->
 <template>
@@ -13,7 +13,7 @@
     </div>
     <div
       v-if="item.component_props.note"
-      style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem"
+      style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem;"
     >
       {{ item.component_props.note }}
     </div>
@@ -38,6 +38,7 @@
         :before-read="beforeRead"
         :after-read="afterRead"
         :before-delete="beforeDelete"
+        :multiple="item.component_props.max_size > 1"
       >
         <van-button icon="plus" type="primary">上传文件</van-button>
       </van-uploader>
@@ -104,16 +105,21 @@ const beforeRead = (file) => {
   //   (item) => `video/${item}`
   // );
   let flag = true;
+  if (file.length + 1 > props.item.component_props.max_count) {
+    // 数量限制
+    flag = false;
+    showToast(`最大上传数量为${props.item.component_props.max_count}个`);
+  }
   if (fileList.value.length + 1 > props.item.component_props.max_count) {
     // 数量限制
     flag = false;
     showToast(`最大上传数量为${props.item.component_props.max_count}个`);
   }
-  if (file.size > props.item.component_props.max_size) {
+  if ((file.size / 1024 / 1024).toFixed(2) > props.item.component_props.max_size) {
     // 体积限制
     flag = false;
     showToast(
-      `最大文件体积为${(props.item.component_props.max_size / 1024 / 1024).toFixed(2)}MB`
+      `最大文件体积为${props.item.component_props.max_size}MB`
     );
   }
   // if (_.isArray(file)) {
@@ -258,8 +264,9 @@ var muliUpload = async (files) => {
 // 生成数据库真实文件地址
 const uploadQiniu = async (file, token, name, md5) => {
+  let suffix = /\.[^\.]+$/.exec(name); // 获取后缀
   // let affix = uuidv4();
-  let fileName = `uploadForm/${formCode}/${md5}.${name.split(".")[1]}`;
+  let fileName = `uploadForm/${formCode}/${md5}${suffix}`;
   let formData = new FormData();
   formData.append("file", file); // 通过append向form对象添加数据
   formData.append("token", token);
--- a/src/components/ImageUploaderField/index.vue
View file @9580bc4
+++ b/src/components/ImageUploaderField/index.vue
View file @9580bc4
 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-21 14:54:30
+ * @LastEditTime: 2022-12-30 10:31:02
  * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
  * @Description: 图片上传控件
 -->
@@ -11,6 +11,12 @@
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
     </div>
+    <div
+      v-if="item.component_props.note"
+      style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem;"
+    >
+      {{ item.component_props.note }}
+    </div>
     <div style="padding: 1rem">
       <van-uploader
         :name="item.name"
@@ -19,7 +25,7 @@
         :after-read="afterRead"
         :before-delete="beforeDelete"
         v-model="fileList"
-        :multiple="item.component_props.multiple"
+        :multiple="item.component_props.max_size > 1"
       />
     </div>
     <div class="type-text">上传类型:&nbsp;{{ type_text }}</div>
@@ -111,13 +117,11 @@ const beforeRead = (file) => {
       flag = false;
       showToast(`最大上传数量为${props.item.component_props.max_count}张`);
     }
-    if (file.size > props.item.component_props.max_size) {
+    if ((file.size / 1024 / 1024).toFixed(2) > props.item.component_props.max_size) {
       // 体积限制
       flag = false;
       showToast(
-        `最大文件体积为${(props.item.component_props.max_size / 1024 / 1024).toFixed(
+        `最大文件体积为${props.item.component_props.max_size}MB`
-          2
-        )}MB`
       );
     }
   }
@@ -259,10 +263,20 @@ var muliUpload = async (files) => {
   }
 };
+
+
+const getType = (file, name) => {
+  var index1 = name.lastIndexOf(".");
+  var index2 = file.length;
+  var type = file.substring(index1, index2).toUpperCase();
+  return type;
+}
+
 // 生成数据库真实图片地址
 const uploadQiniu = async (file, token, name, md5) => {
+  let suffix = /\.[^\.]+$/.exec(name); // 获取后缀
   // let affix = uuidv4();
-  let fileName = `uploadForm/${formCode}/${md5}.${name.split(".")[1]}`;
+  let fileName = `uploadForm/${formCode}/${md5}${suffix}`;
   let formData = new FormData();
   formData.append("file", file); // 通过append向form对象添加数据
   formData.append("token", token);