联调图片上传功能

hookehuyr
Commit c7759031f222a132a77e7f21bf06bb07fac28cf5 c7759031 1 parent c5bd0b30
Showing 9 changed files with 735 additions and 52 deletions
package-lock.json
package.json
src/api/common.js
src/components/ImageUploaderField/index.vue
src/utils/axios.js
src/utils/qetag.js
src/utils/sha1.js
src/views/index.vue
yarn.lock
--- a/package-lock.json
View file @c775903
+++ b/package-lock.json
View file @c775903
@@ -13,15 +13,18 @@
         "@vitejs/plugin-legacy": "^1.8.2",
         "@vueuse/core": "^8.5.0",
         "animate.css": "^4.1.1",
+         "browser-md5-file": "^1.1.1",
         "dayjs": "^1.11.3",
         "default-passive-events": "^2.0.0",
         "global": "^4.4.0",
         "html2canvas": "^1.4.1",
         "jquery": "^3.6.0",
         "js-cookie": "^3.0.1",
+         "js-sha1": "^0.6.0",
         "lodash": "^4.17.21",
         "moment": "^2.29.3",
         "mui-player": "^1.7.0",
+         "sha1": "^1.1.1",
         "typescript": "^4.7.3",
         "uuid": "^8.3.2",
         "vant": "^4.0.0-rc.8",
@@ -1204,6 +1207,15 @@
         "node": ">=8"
       }
     },
+     "node_modules/browser-md5-file": {
+       "version": "1.1.1",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/browser-md5-file/-/browser-md5-file-1.1.1.tgz",
+       "integrity": "sha512-9h2UViTtZPhBa7oHvp5mb7MvJaX5OKEPUsplDwJ800OIV+In7BOR3RXOMB78obn2iQVIiS3WkVLhG7Zu1EMwbw==",
+       "license": "MIT",
+       "dependencies": {
+         "spark-md5": "^2.0.2"
+       }
+     },
     "node_modules/browser-stdout": {
       "version": "1.3.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/browser-stdout/-/browser-stdout-1.3.1.tgz",
@@ -1389,6 +1401,15 @@
         "tslib": "^2.0.3"
       }
     },
+     "node_modules/charenc": {
+       "version": "0.0.2",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/charenc/-/charenc-0.0.2.tgz",
+       "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
+       "license": "BSD-3-Clause",
+       "engines": {
+         "node": "*"
+       }
+     },
     "node_modules/check-error": {
       "version": "1.0.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/check-error/-/check-error-1.0.2.tgz",
@@ -1656,6 +1677,15 @@
         "node": ">= 8"
       }
     },
+     "node_modules/crypt": {
+       "version": "0.0.2",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/crypt/-/crypt-0.0.2.tgz",
+       "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
+       "license": "BSD-3-Clause",
+       "engines": {
+         "node": "*"
+       }
+     },
     "node_modules/css-line-break": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
@@ -3431,6 +3461,12 @@
         "node": ">=12"
       }
     },
+     "node_modules/js-sha1": {
+       "version": "0.6.0",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/js-sha1/-/js-sha1-0.6.0.tgz",
+       "integrity": "sha512-01gwBFreYydzmU9BmZxpVk6svJJHrVxEN3IOiGl6VO93bVKYETJ0sIth6DASI6mIFdt7NmfX9UiByRzsYHGU9w==",
+       "license": "MIT"
+     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5052,6 +5088,19 @@
         "randombytes": "^2.1.0"
       }
     },
+     "node_modules/sha1": {
+       "version": "1.1.1",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/sha1/-/sha1-1.1.1.tgz",
+       "integrity": "sha1-rdqnqTFo85PxnrKxUJFhjicA+Eg=",
+       "license": "BSD-3-Clause",
+       "dependencies": {
+         "charenc": ">= 0.0.1",
+         "crypt": ">= 0.0.1"
+       },
+       "engines": {
+         "node": "*"
+       }
+     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5193,6 +5242,12 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "license": "MIT"
     },
+     "node_modules/spark-md5": {
+       "version": "2.0.2",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/spark-md5/-/spark-md5-2.0.2.tgz",
+       "integrity": "sha1-N7djhHdjrn56zvLKUjPQHmSaeLc=",
+       "license": "WTFPL"
+     },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -7042,6 +7097,14 @@
         "fill-range": "^7.0.1"
       }
     },
+     "browser-md5-file": {
+       "version": "1.1.1",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/browser-md5-file/-/browser-md5-file-1.1.1.tgz",
+       "integrity": "sha512-9h2UViTtZPhBa7oHvp5mb7MvJaX5OKEPUsplDwJ800OIV+In7BOR3RXOMB78obn2iQVIiS3WkVLhG7Zu1EMwbw==",
+       "requires": {
+         "spark-md5": "^2.0.2"
+       }
+     },
     "browser-stdout": {
       "version": "1.3.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/browser-stdout/-/browser-stdout-1.3.1.tgz",
@@ -7172,6 +7235,11 @@
         "tslib": "^2.0.3"
       }
     },
+     "charenc": {
+       "version": "0.0.2",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/charenc/-/charenc-0.0.2.tgz",
+       "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+     },
     "check-error": {
       "version": "1.0.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/check-error/-/check-error-1.0.2.tgz",
@@ -7358,6 +7426,11 @@
         "which": "^2.0.1"
       }
     },
+     "crypt": {
+       "version": "0.0.2",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/crypt/-/crypt-0.0.2.tgz",
+       "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+     },
     "css-line-break": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
@@ -8569,6 +8642,11 @@
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
       "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
     },
+     "js-sha1": {
+       "version": "0.6.0",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/js-sha1/-/js-sha1-0.6.0.tgz",
+       "integrity": "sha512-01gwBFreYydzmU9BmZxpVk6svJJHrVxEN3IOiGl6VO93bVKYETJ0sIth6DASI6mIFdt7NmfX9UiByRzsYHGU9w=="
+     },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9668,6 +9746,15 @@
         "randombytes": "^2.1.0"
       }
     },
+     "sha1": {
+       "version": "1.1.1",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/sha1/-/sha1-1.1.1.tgz",
+       "integrity": "sha1-rdqnqTFo85PxnrKxUJFhjicA+Eg=",
+       "requires": {
+         "charenc": ">= 0.0.1",
+         "crypt": ">= 0.0.1"
+       }
+     },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -9768,6 +9855,11 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+     "spark-md5": {
+       "version": "2.0.2",
+       "resolved": "https://mirrors.cloud.tencent.com/npm/spark-md5/-/spark-md5-2.0.2.tgz",
+       "integrity": "sha1-N7djhHdjrn56zvLKUjPQHmSaeLc="
+     },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
--- a/package.json
View file @c775903
+++ b/package.json
View file @c775903
@@ -17,15 +17,18 @@
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vueuse/core": "^8.5.0",
     "animate.css": "^4.1.1",
+     "browser-md5-file": "^1.1.1",
     "dayjs": "^1.11.3",
     "default-passive-events": "^2.0.0",
     "global": "^4.4.0",
     "html2canvas": "^1.4.1",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
+     "js-sha1": "^0.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.3",
     "mui-player": "^1.7.0",
+     "sha1": "^1.1.1",
     "typescript": "^4.7.3",
     "uuid": "^8.3.2",
     "vant": "^4.0.0-rc.8",
--- a/src/api/common.js
View file @c775903
+++ b/src/api/common.js
View file @c775903
 /*
  * @Date: 2022-06-17 14:54:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2022-09-06 17:03:55
+  * @LastEditTime: 2022-12-01 16:26:27
  * @FilePath: /data-table/src/api/common.js
  * @Description: 通用接口
  */
@@ -22,8 +22,6 @@ export const smsAPI = (params) => fn(fetch.post(Api.SMS, params));
 
 /**
  * @description: 获取七牛token
-  * @param {*} filename 文件名
-  * @param {*} file 图片base64
  * @returns
  */
 export const qiniuTokenAPI = (params) => fn(fetch.stringifyPost(Api.TOKEN, params));
--- a/src/components/ImageUploaderField/index.vue
View file @c775903
+++ b/src/components/ImageUploaderField/index.vue
View file @c775903
@@ -7,18 +7,28 @@
 -->
 <template>
   <div class="image-uploader-field">
-     <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+     <div class="label">
+       {{ item.component_props.label
+       }}<span v-if="item.component_props.required">&nbsp;*</span>
+     </div>
     <div style="padding: 1rem">
       <van-uploader
         upload-icon="add"
         :before-read="beforeRead"
         :after-read="afterRead"
+         :before-delete="beforeDelete"
         v-model="fileList"
         :multiple="item.component_props.multiple"
       />
     </div>
     <div class="type-text">上传格式：{{ type_text }}</div>
   </div>
+ 
+   <van-overlay :show="loading">
+     <div class="wrapper" @click.stop>
+       <van-loading vertical color="#FFFFFF">上传中...</van-loading>
+     </div>
+   </van-overlay>
 </template>
 
 <script setup>
@@ -28,84 +38,166 @@
  * @param image_type[Array] 图片上传类型
  * @param multiple[Boolean] 图片多选
  */
- import { Toast } from "vant";
+ import { showSuccessToast, showFailToast } from "vant";
 import _ from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
+ import BMF from "browser-md5-file";
+ import { useRoute } from "vue-router";
+ import axios from "axios";
+ import { getEtag } from "@/utils/qetag.js"; // 生成hash值
 
+ const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
+ const emit = defineEmits(["active"]);
+ 
+ const show_empty = ref(false);
 
+ // 文件类型中文页面显示
 const type_text = computed(() => {
-   return props.item.component_props.image_type.join("/");
+   return props.item.component_props.image_type;
 });
 
 // 上传前置处理
 const beforeRead = (file) => {
+   // 类型限制
   const image_types = _.map(
-     props.item.component_props.image_type,
+     props.item.component_props.image_type.split("/"),
     (item) => `image/${item}`
   );
+ 
   let flag = true;
   if (_.isArray(file)) {
     // 多张图片
     const types = _.difference(_.uniq(_.map(file, (item) => item.type)), image_types); // 数组返回不能上传的类型
     if (types.length) {
       flag = false;
-       Toast("请上传指定格式图片");
+       showFailToast("请上传指定格式图片");
     }
   } else {
     if (!_.includes(image_types, file.type)) {
-       Toast("请上传指定格式图片");
+       showFailToast("请上传指定格式图片");
       flag = false;
     }
   }
   return flag;
 };
 
- const afterRead = async (file) => {
-   // 此时可以自行将文件上传至服务器
-   let affix = uuidv4();
-   let base64url = file.content.slice(file.content.indexOf(",") + 1); // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
+ /********** 上传七牛云获取图片地址 ***********/
+ const loading = ref(false);
+ const formCode = $route.query.code; // 表单code
+ const uuid = () => {
+   let s = [];
+   let hexDigits = "0123456789abcdef";
+   for (var i = 0; i < 36; i++) {
+     s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+   }
+   s[14] = "4";
+   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+   s[8] = s[13] = s[18] = s[23] = "-";
+ 
+   var uuid = s.join("");
+   return uuid;
+ };
+ 
+ const uploadQiniu = async (file, token, filename) => {
+   let formData = new FormData();
+   formData.append("file", file); // 通过append向form对象添加数据
+   formData.append("token", token);
+   formData.append("key", formCode + "/" + uuid() + "." + file.name.split(".")[1]);
+   let config = {
+     headers: { "Content-Type": "multipart/form-data" },
+   };
+   // 自拍图片上传七牛服务器
+   const { filekey, hash, image_info } = await qiniuUploadAPI(
+     "http://upload.qiniu.com/",
+     formData,
+     config
+   );
+   if (filekey) {
+     // 保存图片
+     const { data } = await saveFileAPI({
+       filekey,
+       hash,
+       format: image_info.format,
+       height: image_info.height,
+       width: image_info.width,
+     });
+     return data;
+   }
+ };
+ /****************** END *******************/
+ 
+ const afterRead = async (files) => {
+   loading.value = true;
+   // 获取HASH值
+   const hash = getEtag(files.content);
   // 获取七牛token
+   const filename = formCode + "/" + uuid() + "." + files.file.name.split(".")[1];
   const { token, key, code } = await qiniuTokenAPI({
-     filename: `${affix}_image_upload`,
-     file: base64url,
+     name: filename,
+     hash,
   });
-   if (code) {
-     const config = {
-       headers: {
-         "Content-Type": "application/octet-stream",
-         Authorization: "UpToken " + token, // UpToken后必须有一个 ' '(空格)
-       },
+   // 文件上传七牛云
+   files.status = "uploading";
+   files.message = "上传中...";
+   const imgUrl = await uploadQiniu(files.file, token, filename);
+   // 上传失败提示
+   if (!imgUrl.src) {
+     files.status = "failed";
+     files.message = "上传失败";
+     loading.value = false;
+   } else {
+     files.status = "";
+     files.message = "";
+     fileList.value.pop();
+     fileList.value.push({
+       url: imgUrl.src,
+       isImage: true,
+     });
+ 
+     props.item.value = {
+       key: "image_uploader",
+       filed_name: props.item.key,
+       value: fileList.value,
     };
-     // 上传七牛服务器
-     const { filekey, hash, image_info } = await qiniuUploadAPI(
-       "http://upload.qiniup.com/putb64/-1/key/" + key,
-       base64url,
-       config
-     );
-     if (filekey) {
-       // 保存图片
-       const { data } = await saveFileAPI({
-         filekey,
-         hash,
-         format: image_info.format,
-         height: image_info.height,
-         width: image_info.width,
-       });
-       console.warn(data.src);
-     }
+     emit("active", props.item.value);
+     loading.value = false;
   }
 };
 
+ const beforeDelete = (files) => {
+   fileList.value = fileList.value.filter((item) => {
+     if (item.url !== files.url) return item;
+   });
+   props.item.value = {
+     key: "image_uploader",
+     filed_name: props.item.key,
+     value: fileList.value,
+   };
+   emit("active", props.item.value);
+ };
+ 
 const fileList = ref([
-   { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
+   // { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
   // Uploader 根据文件后缀来判断是否为图片文件
   // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
   // { url: 'https://cloud-image', isImage: true },
 ]);
+ 
+ const validImageUploader = () => {
+   // 必填项 未上传图片
+   if (props.item.component_props.required && !fileList.value.length) {
+     show_empty.value = true;
+   } else {
+     show_empty.value = false;
+   }
+   return !show_empty.value;
+ };
+ 
+ defineExpose({ validImageUploader });
 </script>
 
 <style lang="less" scoped>
@@ -127,4 +219,17 @@ const fileList = ref([
     color: gray;
   }
 }
+ 
+ .wrapper {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   height: 100%;
+ }
+ 
+ .block {
+   width: 120px;
+   height: 120px;
+   background-color: #fff;
+ }
 </style>
--- a/src/utils/axios.js
View file @c775903
+++ b/src/utils/axios.js
View file @c775903
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-28 10:17:40
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2022-11-17 10:17:01
+  * @LastEditTime: 2022-12-01 16:33:51
  * @FilePath: /data-table/src/utils/axios.js
  * @Description:
  */
@@ -28,7 +28,7 @@ axios.interceptors.request.use(
      * POST PHP需要修改数据格式
      * 序列化POST请求时需要屏蔽上传相关接口，上传相关接口序列化后报错
      */
-     config.data = config.method === 'post' && !strExist(['a=upload', 'upload.qiniup.com'], config.url) ? qs.stringify(config.data) : config.data;
+     // config.data = config.method === 'post' && !strExist(['a=upload', 'upload.qiniup.com'], config.url) ? qs.stringify(config.data) : config.data;
     // 绑定默认请求头
     config.params = { ...config.params, timestamp }
     return config;
--- a/src/utils/qetag.js 0 → 100644
View file @c775903
+++ b/src/utils/qetag.js 0 → 100644
View file @c775903
+ import sha1 from "js-sha1";
+ 
+ function getEtag(buffer, callback) {
+   // sha1算法
+   var shA1 = sha1.digest;
+ 
+   // 以4M为单位分割
+   var blockSize = 4 * 1024 * 1024;
+   var sha1String = [];
+   var prefix = 0x16;
+   var blockCount = 0;
+ 
+   var bufferSize = buffer.size || buffer.length || buffer.byteLength;
+   blockCount = Math.ceil(bufferSize / blockSize);
+ 
+   for (var i = 0; i < blockCount; i++) {
+     sha1String.push(shA1(buffer.slice(i * blockSize, (i + 1) * blockSize)));
+   }
+   function concatArr2Uint8(s) {//Array 2 Uint8Array
+     var tmp = [];
+     for (var i of s) tmp = tmp.concat(i);
+     return new Uint8Array(tmp);
+   }
+   function Uint8ToBase64(u8Arr, urisafe) {//Uint8Array 2 Base64
+     var CHUNK_SIZE = 0x8000; //arbitrary number
+     var index = 0;
+     var length = u8Arr.length;
+     var result = '';
+     var slice;
+     while (index < length) {
+       slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
+       result += String.fromCharCode.apply(null, slice);
+       index += CHUNK_SIZE;
+     }
+     return urisafe ? btoa(result).replace(/\//g, '_').replace(/\+/g, '-') : btoa(result);
+   }
+   function calcEtag() {
+     if (!sha1String.length) return 'Fto5o-5ea0sNMlW_75VgGJCv2AcJ';
+     var sha1Buffer = concatArr2Uint8(sha1String);
+     // 如果大于4M，则对各个块的sha1结果再次sha1
+     if (blockCount > 1) {
+       prefix = 0x96;
+       sha1Buffer = shA1(sha1Buffer.buffer);
+     } else {
+       sha1Buffer = Array.apply([], sha1Buffer);
+     }
+     sha1Buffer = concatArr2Uint8([[prefix], sha1Buffer]);
+     return Uint8ToBase64(sha1Buffer, true);
+   }
+   return (calcEtag());
+ }
+ 
+ export { getEtag }
--- a/src/utils/sha1.js 0 → 100644
View file @c775903
+++ b/src/utils/sha1.js 0 → 100644
View file @c775903
+ /*
+  * [js-sha1]{@link https://github.com/emn178/js-sha1}
+  *
+  * @version 0.6.0
+  * @author Chen, Yi-Cyuan [emn178@gmail.com]
+  * @copyright Chen, Yi-Cyuan 2014-2017
+  * @license MIT
+  */
+ /*jslint bitwise: true */
+ (function () {
+   'use strict';
+ 
+   var root = typeof window === 'object' ? window : {};
+   var NODE_JS = !root.JS_SHA1_NO_NODE_JS && typeof process === 'object' && process.versions && process.versions.node;
+   if (NODE_JS) {
+     root = global;
+   }
+   var COMMON_JS = !root.JS_SHA1_NO_COMMON_JS && typeof module === 'object' && module.exports;
+   var AMD = typeof define === 'function' && define.amd;
+   var HEX_CHARS = '0123456789abcdef'.split('');
+   var EXTRA = [-2147483648, 8388608, 32768, 128];
+   var SHIFT = [24, 16, 8, 0];
+   var OUTPUT_TYPES = ['hex', 'array', 'digest', 'arrayBuffer'];
+ 
+   var blocks = [];
+ 
+   var createOutputMethod = function (outputType) {
+     return function (message) {
+       return new Sha1(true).update(message)[outputType]();
+     };
+   };
+ 
+   var createMethod = function () {
+     var method = createOutputMethod('hex');
+     if (NODE_JS) {
+       method = nodeWrap(method);
+     }
+     method.create = function () {
+       return new Sha1();
+     };
+     method.update = function (message) {
+       return method.create().update(message);
+     };
+     for (var i = 0; i < OUTPUT_TYPES.length; ++i) {
+       var type = OUTPUT_TYPES[i];
+       method[type] = createOutputMethod(type);
+     }
+     return method;
+   };
+ 
+   var nodeWrap = function (method) {
+     var crypto = eval("require('crypto')");
+     var Buffer = eval("require('buffer').Buffer");
+     var nodeMethod = function (message) {
+       if (typeof message === 'string') {
+         return crypto.createHash('sha1').update(message, 'utf8').digest('hex');
+       } else if (message.constructor === ArrayBuffer) {
+         message = new Uint8Array(message);
+       } else if (message.length === undefined) {
+         return method(message);
+       }
+       return crypto.createHash('sha1').update(new Buffer(message)).digest('hex');
+     };
+     return nodeMethod;
+   };
+ 
+   function Sha1(sharedMemory) {
+     if (sharedMemory) {
+       blocks[0] = blocks[16] = blocks[1] = blocks[2] = blocks[3] =
+         blocks[4] = blocks[5] = blocks[6] = blocks[7] =
+         blocks[8] = blocks[9] = blocks[10] = blocks[11] =
+         blocks[12] = blocks[13] = blocks[14] = blocks[15] = 0;
+       this.blocks = blocks;
+     } else {
+       this.blocks = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+     }
+ 
+     this.h0 = 0x67452301;
+     this.h1 = 0xEFCDAB89;
+     this.h2 = 0x98BADCFE;
+     this.h3 = 0x10325476;
+     this.h4 = 0xC3D2E1F0;
+ 
+     this.block = this.start = this.bytes = this.hBytes = 0;
+     this.finalized = this.hashed = false;
+     this.first = true;
+   }
+ 
+   Sha1.prototype.update = function (message) {
+     if (this.finalized) {
+       return;
+     }
+     var notString = typeof (message) !== 'string';
+     if (notString && message.constructor === root.ArrayBuffer) {
+       message = new Uint8Array(message);
+     }
+     var code, index = 0, i, length = message.length || 0, blocks = this.blocks;
+ 
+     while (index < length) {
+       if (this.hashed) {
+         this.hashed = false;
+         blocks[0] = this.block;
+         blocks[16] = blocks[1] = blocks[2] = blocks[3] =
+           blocks[4] = blocks[5] = blocks[6] = blocks[7] =
+           blocks[8] = blocks[9] = blocks[10] = blocks[11] =
+           blocks[12] = blocks[13] = blocks[14] = blocks[15] = 0;
+       }
+ 
+       if (notString) {
+         for (i = this.start; index < length && i < 64; ++index) {
+           blocks[i >> 2] |= message[index] << SHIFT[i++ & 3];
+         }
+       } else {
+         for (i = this.start; index < length && i < 64; ++index) {
+           code = message.charCodeAt(index);
+           if (code < 0x80) {
+             blocks[i >> 2] |= code << SHIFT[i++ & 3];
+           } else if (code < 0x800) {
+             blocks[i >> 2] |= (0xc0 | (code >> 6)) << SHIFT[i++ & 3];
+             blocks[i >> 2] |= (0x80 | (code & 0x3f)) << SHIFT[i++ & 3];
+           } else if (code < 0xd800 || code >= 0xe000) {
+             blocks[i >> 2] |= (0xe0 | (code >> 12)) << SHIFT[i++ & 3];
+             blocks[i >> 2] |= (0x80 | ((code >> 6) & 0x3f)) << SHIFT[i++ & 3];
+             blocks[i >> 2] |= (0x80 | (code & 0x3f)) << SHIFT[i++ & 3];
+           } else {
+             code = 0x10000 + (((code & 0x3ff) << 10) | (message.charCodeAt(++index) & 0x3ff));
+             blocks[i >> 2] |= (0xf0 | (code >> 18)) << SHIFT[i++ & 3];
+             blocks[i >> 2] |= (0x80 | ((code >> 12) & 0x3f)) << SHIFT[i++ & 3];
+             blocks[i >> 2] |= (0x80 | ((code >> 6) & 0x3f)) << SHIFT[i++ & 3];
+             blocks[i >> 2] |= (0x80 | (code & 0x3f)) << SHIFT[i++ & 3];
+           }
+         }
+       }
+ 
+       this.lastByteIndex = i;
+       this.bytes += i - this.start;
+       if (i >= 64) {
+         this.block = blocks[16];
+         this.start = i - 64;
+         this.hash();
+         this.hashed = true;
+       } else {
+         this.start = i;
+       }
+     }
+     if (this.bytes > 4294967295) {
+       this.hBytes += this.bytes / 4294967296 << 0;
+       this.bytes = this.bytes % 4294967296;
+     }
+     return this;
+   };
+ 
+   Sha1.prototype.finalize = function () {
+     if (this.finalized) {
+       return;
+     }
+     this.finalized = true;
+     var blocks = this.blocks, i = this.lastByteIndex;
+     blocks[16] = this.block;
+     blocks[i >> 2] |= EXTRA[i & 3];
+     this.block = blocks[16];
+     if (i >= 56) {
+       if (!this.hashed) {
+         this.hash();
+       }
+       blocks[0] = this.block;
+       blocks[16] = blocks[1] = blocks[2] = blocks[3] =
+         blocks[4] = blocks[5] = blocks[6] = blocks[7] =
+         blocks[8] = blocks[9] = blocks[10] = blocks[11] =
+         blocks[12] = blocks[13] = blocks[14] = blocks[15] = 0;
+     }
+     blocks[14] = this.hBytes << 3 | this.bytes >>> 29;
+     blocks[15] = this.bytes << 3;
+     this.hash();
+   };
+ 
+   Sha1.prototype.hash = function () {
+     var a = this.h0, b = this.h1, c = this.h2, d = this.h3, e = this.h4;
+     var f, j, t, blocks = this.blocks;
+ 
+     for (j = 16; j < 80; ++j) {
+       t = blocks[j - 3] ^ blocks[j - 8] ^ blocks[j - 14] ^ blocks[j - 16];
+       blocks[j] = (t << 1) | (t >>> 31);
+     }
+ 
+     for (j = 0; j < 20; j += 5) {
+       f = (b & c) | ((~b) & d);
+       t = (a << 5) | (a >>> 27);
+       e = t + f + e + 1518500249 + blocks[j] << 0;
+       b = (b << 30) | (b >>> 2);
+ 
+       f = (a & b) | ((~a) & c);
+       t = (e << 5) | (e >>> 27);
+       d = t + f + d + 1518500249 + blocks[j + 1] << 0;
+       a = (a << 30) | (a >>> 2);
+ 
+       f = (e & a) | ((~e) & b);
+       t = (d << 5) | (d >>> 27);
+       c = t + f + c + 1518500249 + blocks[j + 2] << 0;
+       e = (e << 30) | (e >>> 2);
+ 
+       f = (d & e) | ((~d) & a);
+       t = (c << 5) | (c >>> 27);
+       b = t + f + b + 1518500249 + blocks[j + 3] << 0;
+       d = (d << 30) | (d >>> 2);
+ 
+       f = (c & d) | ((~c) & e);
+       t = (b << 5) | (b >>> 27);
+       a = t + f + a + 1518500249 + blocks[j + 4] << 0;
+       c = (c << 30) | (c >>> 2);
+     }
+ 
+     for (; j < 40; j += 5) {
+       f = b ^ c ^ d;
+       t = (a << 5) | (a >>> 27);
+       e = t + f + e + 1859775393 + blocks[j] << 0;
+       b = (b << 30) | (b >>> 2);
+ 
+       f = a ^ b ^ c;
+       t = (e << 5) | (e >>> 27);
+       d = t + f + d + 1859775393 + blocks[j + 1] << 0;
+       a = (a << 30) | (a >>> 2);
+ 
+       f = e ^ a ^ b;
+       t = (d << 5) | (d >>> 27);
+       c = t + f + c + 1859775393 + blocks[j + 2] << 0;
+       e = (e << 30) | (e >>> 2);
+ 
+       f = d ^ e ^ a;
+       t = (c << 5) | (c >>> 27);
+       b = t + f + b + 1859775393 + blocks[j + 3] << 0;
+       d = (d << 30) | (d >>> 2);
+ 
+       f = c ^ d ^ e;
+       t = (b << 5) | (b >>> 27);
+       a = t + f + a + 1859775393 + blocks[j + 4] << 0;
+       c = (c << 30) | (c >>> 2);
+     }
+ 
+     for (; j < 60; j += 5) {
+       f = (b & c) | (b & d) | (c & d);
+       t = (a << 5) | (a >>> 27);
+       e = t + f + e - 1894007588 + blocks[j] << 0;
+       b = (b << 30) | (b >>> 2);
+ 
+       f = (a & b) | (a & c) | (b & c);
+       t = (e << 5) | (e >>> 27);
+       d = t + f + d - 1894007588 + blocks[j + 1] << 0;
+       a = (a << 30) | (a >>> 2);
+ 
+       f = (e & a) | (e & b) | (a & b);
+       t = (d << 5) | (d >>> 27);
+       c = t + f + c - 1894007588 + blocks[j + 2] << 0;
+       e = (e << 30) | (e >>> 2);
+ 
+       f = (d & e) | (d & a) | (e & a);
+       t = (c << 5) | (c >>> 27);
+       b = t + f + b - 1894007588 + blocks[j + 3] << 0;
+       d = (d << 30) | (d >>> 2);
+ 
+       f = (c & d) | (c & e) | (d & e);
+       t = (b << 5) | (b >>> 27);
+       a = t + f + a - 1894007588 + blocks[j + 4] << 0;
+       c = (c << 30) | (c >>> 2);
+     }
+ 
+     for (; j < 80; j += 5) {
+       f = b ^ c ^ d;
+       t = (a << 5) | (a >>> 27);
+       e = t + f + e - 899497514 + blocks[j] << 0;
+       b = (b << 30) | (b >>> 2);
+ 
+       f = a ^ b ^ c;
+       t = (e << 5) | (e >>> 27);
+       d = t + f + d - 899497514 + blocks[j + 1] << 0;
+       a = (a << 30) | (a >>> 2);
+ 
+       f = e ^ a ^ b;
+       t = (d << 5) | (d >>> 27);
+       c = t + f + c - 899497514 + blocks[j + 2] << 0;
+       e = (e << 30) | (e >>> 2);
+ 
+       f = d ^ e ^ a;
+       t = (c << 5) | (c >>> 27);
+       b = t + f + b - 899497514 + blocks[j + 3] << 0;
+       d = (d << 30) | (d >>> 2);
+ 
+       f = c ^ d ^ e;
+       t = (b << 5) | (b >>> 27);
+       a = t + f + a - 899497514 + blocks[j + 4] << 0;
+       c = (c << 30) | (c >>> 2);
+     }
+ 
+     this.h0 = this.h0 + a << 0;
+     this.h1 = this.h1 + b << 0;
+     this.h2 = this.h2 + c << 0;
+     this.h3 = this.h3 + d << 0;
+     this.h4 = this.h4 + e << 0;
+   };
+ 
+   Sha1.prototype.hex = function () {
+     this.finalize();
+ 
+     var h0 = this.h0, h1 = this.h1, h2 = this.h2, h3 = this.h3, h4 = this.h4;
+ 
+     return HEX_CHARS[(h0 >> 28) & 0x0F] + HEX_CHARS[(h0 >> 24) & 0x0F] +
+       HEX_CHARS[(h0 >> 20) & 0x0F] + HEX_CHARS[(h0 >> 16) & 0x0F] +
+       HEX_CHARS[(h0 >> 12) & 0x0F] + HEX_CHARS[(h0 >> 8) & 0x0F] +
+       HEX_CHARS[(h0 >> 4) & 0x0F] + HEX_CHARS[h0 & 0x0F] +
+       HEX_CHARS[(h1 >> 28) & 0x0F] + HEX_CHARS[(h1 >> 24) & 0x0F] +
+       HEX_CHARS[(h1 >> 20) & 0x0F] + HEX_CHARS[(h1 >> 16) & 0x0F] +
+       HEX_CHARS[(h1 >> 12) & 0x0F] + HEX_CHARS[(h1 >> 8) & 0x0F] +
+       HEX_CHARS[(h1 >> 4) & 0x0F] + HEX_CHARS[h1 & 0x0F] +
+       HEX_CHARS[(h2 >> 28) & 0x0F] + HEX_CHARS[(h2 >> 24) & 0x0F] +
+       HEX_CHARS[(h2 >> 20) & 0x0F] + HEX_CHARS[(h2 >> 16) & 0x0F] +
+       HEX_CHARS[(h2 >> 12) & 0x0F] + HEX_CHARS[(h2 >> 8) & 0x0F] +
+       HEX_CHARS[(h2 >> 4) & 0x0F] + HEX_CHARS[h2 & 0x0F] +
+       HEX_CHARS[(h3 >> 28) & 0x0F] + HEX_CHARS[(h3 >> 24) & 0x0F] +
+       HEX_CHARS[(h3 >> 20) & 0x0F] + HEX_CHARS[(h3 >> 16) & 0x0F] +
+       HEX_CHARS[(h3 >> 12) & 0x0F] + HEX_CHARS[(h3 >> 8) & 0x0F] +
+       HEX_CHARS[(h3 >> 4) & 0x0F] + HEX_CHARS[h3 & 0x0F] +
+       HEX_CHARS[(h4 >> 28) & 0x0F] + HEX_CHARS[(h4 >> 24) & 0x0F] +
+       HEX_CHARS[(h4 >> 20) & 0x0F] + HEX_CHARS[(h4 >> 16) & 0x0F] +
+       HEX_CHARS[(h4 >> 12) & 0x0F] + HEX_CHARS[(h4 >> 8) & 0x0F] +
+       HEX_CHARS[(h4 >> 4) & 0x0F] + HEX_CHARS[h4 & 0x0F];
+   };
+ 
+   Sha1.prototype.toString = Sha1.prototype.hex;
+ 
+   Sha1.prototype.digest = function () {
+     this.finalize();
+ 
+     var h0 = this.h0, h1 = this.h1, h2 = this.h2, h3 = this.h3, h4 = this.h4;
+ 
+     return [
+       (h0 >> 24) & 0xFF, (h0 >> 16) & 0xFF, (h0 >> 8) & 0xFF, h0 & 0xFF,
+       (h1 >> 24) & 0xFF, (h1 >> 16) & 0xFF, (h1 >> 8) & 0xFF, h1 & 0xFF,
+       (h2 >> 24) & 0xFF, (h2 >> 16) & 0xFF, (h2 >> 8) & 0xFF, h2 & 0xFF,
+       (h3 >> 24) & 0xFF, (h3 >> 16) & 0xFF, (h3 >> 8) & 0xFF, h3 & 0xFF,
+       (h4 >> 24) & 0xFF, (h4 >> 16) & 0xFF, (h4 >> 8) & 0xFF, h4 & 0xFF
+     ];
+   };
+ 
+   Sha1.prototype.array = Sha1.prototype.digest;
+ 
+   Sha1.prototype.arrayBuffer = function () {
+     this.finalize();
+ 
+     var buffer = new ArrayBuffer(20);
+     var dataView = new DataView(buffer);
+     dataView.setUint32(0, this.h0);
+     dataView.setUint32(4, this.h1);
+     dataView.setUint32(8, this.h2);
+     dataView.setUint32(12, this.h3);
+     dataView.setUint32(16, this.h4);
+     return buffer;
+   };
+ 
+   var exports = createMethod();
+ 
+   if (COMMON_JS) {
+     module.exports = exports;
+   } else {
+     root.sha1 = exports;
+     if (AMD) {
+       define(function () {
+         return exports;
+       });
+     }
+   }
+ })();
--- a/src/views/index.vue
View file @c775903
+++ b/src/views/index.vue
View file @c775903
@@ -184,10 +184,11 @@ onMounted(async () => {
   //   },
   // ];
   // 生成自定义组件
-   createComponentType(mockData.value);
+   // createComponentType(mockData.value);
   createComponentType(formData.value);
 });
 
+ const image_uploader = ref(null);
 const sign = ref(null);
 const rate_picker = ref(null);
 const video = ref(null);
@@ -196,15 +197,17 @@ const onSubmit = async (values) => {
   // 合并自定义字段到提交表单字段
   postData.value = _.assign(postData.value, values);
   // 格式化value值为json格式, 提交格式有问题
-   // for (const key in postData.value) {
-   //   postData.value[key] = JSON.stringify(postData.value[key]);
-   // }
+   for (let key in postData.value) {
+     key = JSON.stringify(key);
+     // postData.value[key] = postData.value[key];
+   }
   // 检查非表单输入项
-   if (validOther()) {
+   if (validOther().status) {
     // 通过验证
     const result = await addFormDataAPI({
       form_code: $route.query.code,
-       data: JSON.stringify(postData.value),
+       // data: JSON.stringify(postData.value),
+       data: postData.value,
     });
     if (result.code) {
       showSuccessToast("提交成功");
@@ -212,12 +215,19 @@ const onSubmit = async (values) => {
     // console.warn(postData.value);
     // console.warn("通过验证");
   } else {
-     console.warn("不通过验证");
+     console.warn(validOther().key + "不通过验证");
+     // 图片上传控件报错提示
+     if (validOther().key === "image_uploader") {
+       showFailToast("图片上传为空");
+     }
   }
 };
 
 const onActive = (item) => {
   // 返回自定义字段
+   if (item.key === "image_uploader") {
+     postData.value[item.filed_name] = item.value;
+   }
   if (item.key === "sign") {
     postData.value["sign"] = item.value;
   }
@@ -228,16 +238,32 @@ const onActive = (item) => {
 
 const validOther = () => {
   // 检验没有绑定name的输入项
-   let flag = true;
+   let valid = {
+     status: true,
+     key: "",
+   };
+   if (image_uploader.value) {
+     // 检验图片上传
+     valid = {
+       status: image_uploader.value[0].validImageUploader(),
+       key: "image_uploader",
+     };
+   }
   if (sign.value) {
     // 检验电子签名
-     flag = sign.value[0].validSign();
+     valid = {
+       status: sign.value[0].validSign(),
+       key: "sign",
+     };
   }
   if (rate_picker.value) {
     // 检验评分
-     flag = rate_picker.value[0].validRate();
+     valid = {
+       status: rate_picker.value[0].validRate(),
+       key: "rate_picker",
+     };
   }
-   return flag;
+   return valid;
 };
 </script>
 
--- a/yarn.lock
View file @c775903
+++ b/yarn.lock
View file @c775903
@@ -632,6 +632,13 @@
   dependencies:
     "fill-range" "^7.0.1"
 
+ "browser-md5-file@^1.1.1":
+   "integrity" "sha512-9h2UViTtZPhBa7oHvp5mb7MvJaX5OKEPUsplDwJ800OIV+In7BOR3RXOMB78obn2iQVIiS3WkVLhG7Zu1EMwbw=="
+   "resolved" "https://mirrors.cloud.tencent.com/npm/browser-md5-file/-/browser-md5-file-1.1.1.tgz"
+   "version" "1.1.1"
+   dependencies:
+     "spark-md5" "^2.0.2"
+ 
 "browser-stdout@1.3.1":
   "integrity" "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw=="
   "resolved" "https://mirrors.cloud.tencent.com/npm/browser-stdout/-/browser-stdout-1.3.1.tgz"
@@ -756,6 +763,11 @@
     "snake-case" "^3.0.4"
     "tslib" "^2.0.3"
 
+ "charenc@>= 0.0.1":
+   "integrity" "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+   "resolved" "https://mirrors.cloud.tencent.com/npm/charenc/-/charenc-0.0.2.tgz"
+   "version" "0.0.2"
+ 
 "check-error@^1.0.2":
   "integrity" "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII="
   "resolved" "https://mirrors.cloud.tencent.com/npm/check-error/-/check-error-1.0.2.tgz"
@@ -920,6 +932,11 @@
     "shebang-command" "^2.0.0"
     "which" "^2.0.1"
 
+ "crypt@>= 0.0.1":
+   "integrity" "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+   "resolved" "https://mirrors.cloud.tencent.com/npm/crypt/-/crypt-0.0.2.tgz"
+   "version" "0.0.2"
+ 
 "css-line-break@^2.1.0":
   "integrity" "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w=="
   "resolved" "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz"
@@ -1854,6 +1871,11 @@
   "resolved" "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz"
   "version" "3.0.1"
 
+ "js-sha1@^0.6.0":
+   "integrity" "sha512-01gwBFreYydzmU9BmZxpVk6svJJHrVxEN3IOiGl6VO93bVKYETJ0sIth6DASI6mIFdt7NmfX9UiByRzsYHGU9w=="
+   "resolved" "https://mirrors.cloud.tencent.com/npm/js-sha1/-/js-sha1-0.6.0.tgz"
+   "version" "0.6.0"
+ 
 "js-tokens@^4.0.0":
   "integrity" "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
   "resolved" "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -2693,6 +2715,14 @@
   dependencies:
     "randombytes" "^2.1.0"
 
+ "sha1@^1.1.1":
+   "integrity" "sha1-rdqnqTFo85PxnrKxUJFhjicA+Eg="
+   "resolved" "https://mirrors.cloud.tencent.com/npm/sha1/-/sha1-1.1.1.tgz"
+   "version" "1.1.1"
+   dependencies:
+     "charenc" ">= 0.0.1"
+     "crypt" ">= 0.0.1"
+ 
 "shebang-command@^2.0.0":
   "integrity" "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="
   "resolved" "https://mirrors.cloud.tencent.com/npm/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -2765,6 +2795,11 @@
   "resolved" "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
   "version" "1.4.8"
 
+ "spark-md5@^2.0.2":
+   "integrity" "sha1-N7djhHdjrn56zvLKUjPQHmSaeLc="
+   "resolved" "https://mirrors.cloud.tencent.com/npm/spark-md5/-/spark-md5-2.0.2.tgz"
+   "version" "2.0.2"
+ 
 "sprintf-js@~1.0.2":
   "integrity" "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
   "resolved" "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"