Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
39255749 1 parent 33bdfa24

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

Inline Side-by-side
Showing 3 changed files with 119 additions and 46 deletions
......@@ -18,10 +18,17 @@
:after-read="afterRead"
:before-delete="beforeDelete"
v-model="fileList"
:multiple="true"
:multiple="item.component_props.multiple"
/>
</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>
<van-overlay :show="loading">
......@@ -202,6 +209,7 @@ const afterRead = async (files) => {
files.status = "";
files.message = "";
fileList.value.push({
meta_id: imgUrl.meta_id,
url: imgUrl.src,
isImage: true,
});
......@@ -215,8 +223,10 @@ const afterRead = async (files) => {
props.item.value = {
key: "image_uploader",
filed_name: props.item.key,
// value: fileList.value.map((item) => item.url),
value: fileList.value,
};
show_empty.value = false;
emit("active", props.item.value);
console.warn(fileList.value);
};
......@@ -228,6 +238,7 @@ const beforeDelete = (files) => {
props.item.value = {
key: "image_uploader",
filed_name: props.item.key,
// value: fileList.value.map((item) => item.url),
value: fileList.value,
};
emit("active", props.item.value);
......
......@@ -51,17 +51,26 @@
电子签名不能为空
</div>
</div>
<van-overlay :show="loading">
<div class="wrapper" @click.stop>
<van-loading vertical color="#FFFFFF">生成中...</van-loading>
</div>
</van-overlay>
</template>
<script setup>
import { v4 as uuidv4 } from "uuid";
import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
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({
item: Object,
});
const $route = useRoute();
const emit = defineEmits(["active"]);
const esign = ref(null);
......@@ -80,55 +89,95 @@ const handleReset = () => {
show_control.value = true;
// 删除可能存在的签名
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);
};
/********** 上传七牛云获取图片地址 ***********/
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 = () => {
esign.value
.generate()
.then(async (res) => {
// let fileName = "img1.png";
// let file = this.dataURLtoFile(res, fileName);
// console.log("file", file);
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) => {
loading.value = false;
// 签名生成失败
console.warn(err);
if (err) {
......@@ -221,4 +270,17 @@ export default {
padding-bottom: 1rem;
}
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.block {
width: 120px;
height: 120px;
background-color: #fff;
}
</style>
......
......@@ -180,7 +180,7 @@ const onActive = (item) => {
postData.value[item.filed_name] = item.value;
}
if (item.key === "sign") {
postData.value["sign"] = item.value;
postData.value[item.filed_name] = item.value;
}
if (item.type === "rate") {
postData.value = _.assign(postData.value, { [item.key]: item.value });
......@@ -221,10 +221,10 @@ const onSubmit = async (values) => {
// 合并自定义字段到提交表单字段
postData.value = _.assign(postData.value, values);
// 格式化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) {
// 通过验证
......