fix 电子签名图片保存功能实现

@@ -18,10 +18,17 @@
         :after-read="afterRead"
         :after-read="afterRead"
         :before-delete="beforeDelete"
         :before-delete="beforeDelete"
         v-model="fileList"
         v-model="fileList"
-        :multiple="true"
+        :multiple="item.component_props.multiple"
       />
       />
     </div>
     </div>
     <div class="type-text">上传格式：{{ type_text }}</div>
     <div class="type-text">上传格式：{{ type_text }}</div>
+    <div
+      v-if="show_empty"
+      class="van-field__error-message"
+      style="padding: 0 1rem 1rem 1rem"
+    >
+      图片上传不能为空
+    </div>
   </div>
   </div>
 
 
   <van-overlay :show="loading">
   <van-overlay :show="loading">
@@ -202,6 +209,7 @@ const afterRead = async (files) => {
       files.status = "";
       files.status = "";
       files.message = "";
       files.message = "";
       fileList.value.push({
       fileList.value.push({
+        meta_id: imgUrl.meta_id,
         url: imgUrl.src,
         url: imgUrl.src,
         isImage: true,
         isImage: true,
       });
       });
@@ -215,8 +223,10 @@ const afterRead = async (files) => {
   props.item.value = {
   props.item.value = {
     key: "image_uploader",
     key: "image_uploader",
     filed_name: props.item.key,
     filed_name: props.item.key,
+    // value: fileList.value.map((item) => item.url),
     value: fileList.value,
     value: fileList.value,
   };
   };
+  show_empty.value = false;
   emit("active", props.item.value);
   emit("active", props.item.value);
   console.warn(fileList.value);
   console.warn(fileList.value);
 };
 };
@@ -228,6 +238,7 @@ const beforeDelete = (files) => {
   props.item.value = {
   props.item.value = {
     key: "image_uploader",
     key: "image_uploader",
     filed_name: props.item.key,
     filed_name: props.item.key,
+    // value: fileList.value.map((item) => item.url),
     value: fileList.value,
     value: fileList.value,
   };
   };
   emit("active", props.item.value);
   emit("active", props.item.value);

@@ -51,17 +51,26 @@
       电子签名不能为空
       电子签名不能为空
     </div>
     </div>
   </div>
   </div>
+
+  <van-overlay :show="loading">
+    <div class="wrapper" @click.stop>
+      <van-loading vertical color="#FFFFFF">生成中...</van-loading>
+    </div>
+  </van-overlay>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
 import { v4 as uuidv4 } from "uuid";
 import { v4 as uuidv4 } from "uuid";
 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
 import { showSuccessToast, showFailToast } from "vant";
 import { showSuccessToast, showFailToast } from "vant";
+import { useRoute } from "vue-router";
+import BMF from "browser-md5-file";
+import { getEtag } from "@/utils/qetag.js"; // 生成hash值
 
 
 const props = defineProps({
 const props = defineProps({
   item: Object,
   item: Object,
 });
 });
-
+const $route = useRoute();
 const emit = defineEmits(["active"]);
 const emit = defineEmits(["active"]);
 
 
 const esign = ref(null);
 const esign = ref(null);
@@ -80,55 +89,95 @@ const handleReset = () => {
   show_control.value = true;
   show_control.value = true;
   // 删除可能存在的签名
   // 删除可能存在的签名
   image_url.value = "";
   image_url.value = "";
-  props.item.value = { key: "sign", value: "" };
+  props.item.value = {
+    key: "sign",
+    filed_name: props.item.key,
+    value: "",
+  };
   emit("active", props.item.value);
   emit("active", props.item.value);
 };
 };
 
 
+/********** 上传七牛云获取图片地址 ***********/
+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", filename);
+  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 handleUpload = async (files, filename) => {
+  // 上传图片流程
+  loading.value = true;
+  // 获取HASH值
+  const hash = getEtag(files);
+  // 获取七牛token
+  const { token, key, code } = await qiniuTokenAPI({
+    name: filename,
+    hash,
+  });
+  // 文件上传七牛云
+  const imgUrl = await uploadQiniu(files, token, filename);
+  return imgUrl;
+};
+
 const handleGenerate = () => {
 const handleGenerate = () => {
   esign.value
   esign.value
     .generate()
     .generate()
     .then(async (res) => {
     .then(async (res) => {
-      // let fileName = "img1.png";
-      // let file = this.dataURLtoFile(res, fileName);
-      // console.log("file", file);
       let affix = uuidv4();
       let affix = uuidv4();
-      let base64url = res.slice(res.indexOf(",") + 1); // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
-      // 获取七牛token
-      const { token, key, code } = await qiniuTokenAPI({
-        filename: `${affix}_sign`,
-        file: base64url,
-      });
-      if (code) {
-        const config = {
-          headers: {
-            "Content-Type": "application/octet-stream",
-            Authorization: "UpToken " + token, // UpToken后必须有一个 ' '(空格)
-          },
-        };
-        // 上传七牛服务器
-        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,
-          });
-          props.item.value = { key: "sign", value: data.src };
-          image_url.value = data.src;
-          show_control.value = false;
-          show_empty.value = false;
-          emit("active", props.item.value);
-        }
-      }
+      let fileName = `uploadForm/${formCode}/${affix}_sign.png`;
+      let file = dataURLtoFile(res, fileName); // 生成文件
+      const imgUrl = await handleUpload(file, fileName);
+      loading.value = false;
+      props.item.value = {
+        key: "sign",
+        filed_name: props.item.key,
+        value: imgUrl.src,
+      };
+      image_url.value = imgUrl.src;
+      show_control.value = false;
+      show_empty.value = false;
+      emit("active", props.item.value);
     })
     })
     .catch((err) => {
     .catch((err) => {
+      loading.value = false;
       // 签名生成失败
       // 签名生成失败
       console.warn(err);
       console.warn(err);
       if (err) {
       if (err) {
@@ -221,4 +270,17 @@ export default {
     padding-bottom: 1rem;
     padding-bottom: 1rem;
   }
   }
 }
 }
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
 </style>
 </style>

@@ -180,7 +180,7 @@ const onActive = (item) => {
     postData.value[item.filed_name] = item.value;
     postData.value[item.filed_name] = item.value;
   }
   }
   if (item.key === "sign") {
   if (item.key === "sign") {
-    postData.value["sign"] = item.value;
+    postData.value[item.filed_name] = item.value;
   }
   }
   if (item.type === "rate") {
   if (item.type === "rate") {
     postData.value = _.assign(postData.value, { [item.key]: item.value });
     postData.value = _.assign(postData.value, { [item.key]: item.value });
@@ -221,10 +221,10 @@ const onSubmit = async (values) => {
   // 合并自定义字段到提交表单字段
   // 合并自定义字段到提交表单字段
   postData.value = _.assign(postData.value, values);
   postData.value = _.assign(postData.value, values);
   // 格式化value值为json格式, 提交格式有问题
   // 格式化value值为json格式, 提交格式有问题
-  for (let key in postData.value) {
-    key = JSON.stringify(key);
-    // postData.value[key] = postData.value[key];
-  }
+  // for (let key in postData.value) {
+  //   key = JSON.stringify(key);
+  //   // postData.value[key] = postData.value[key];
+  // }
   // 检查非表单输入项
   // 检查非表单输入项
   if (validOther().status) {
   if (validOther().status) {
     // 通过验证
     // 通过验证