联调图片上传功能

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) => {
+/********** 上传七牛云获取图片地址 ***********/
-  // 此时可以自行将文件上传至服务器
+const loading = ref(false);
-  let affix = uuidv4();
+const formCode = $route.query.code; // 表单code
-  let base64url = file.content.slice(file.content.indexOf(",") + 1); // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
+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`,
+    name: filename,
-    file: base64url,
+    hash,
   });
-  if (code) {
+  // 文件上传七牛云
-    const config = {
+  files.status = "uploading";
-      headers: {
+  files.message = "上传中...";
-        "Content-Type": "application/octet-stream",
+  const imgUrl = await uploadQiniu(files.file, token, filename);
-        Authorization: "UpToken " + token, // UpToken后必须有一个 ' '(空格)
+  // 上传失败提示
-      },
+  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,
     };
-    // 上传七牛服务器
+    emit("active", props.item.value);
-    const { filekey, hash, image_info } = await qiniuUploadAPI(
+    loading.value = false;
-      "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);
-    }
   }
 };
+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) {
+  for (let key in postData.value) {
-  //   postData.value[key] = JSON.stringify(postData.value[key]);
+    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"