图片上传模块功能整理

hookehuyr
Commit cee1b777fbda1095e04b9abd20b6cf1216ad072a cee1b777 1 parent afd3e1b3
Showing 1 changed file with 106 additions and 97 deletions
src/components/ImageUploaderField/index.vue
--- a/src/components/ImageUploaderField/index.vue
View file @cee1b77
+++ b/src/components/ImageUploaderField/index.vue
View file @cee1b77
@@ -60,13 +60,19 @@ 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;
 });
+// 上传图片集合
+const fileList = ref([
+  // { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
+  // Uploader 根据文件后缀来判断是否为图片文件
+  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
+  // { url: 'https://cloud-image', isImage: true },
+]);
 // 上传前置处理
 const beforeRead = (file) => {
@@ -93,54 +99,79 @@ const beforeRead = (file) => {
   return flag;
 };
-/********** 上传七牛云获取图片地址 ***********/
+// 文件读取完成后的回调函数
-const loading = ref(false);
+const afterRead = async (files) => {
-const formCode = $route.query.code; // 表单code
+  if (Array.isArray(files)) {
-const uuid = () => {
+    // 多张图片上传files是一个数组
-  let s = [];
+    muliUpload(files);
-  let hexDigits = "0123456789abcdef";
+  } else {
-  for (var i = 0; i < 36; i++) {
+    const imgUrl = await handleUpload(files);
-    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    // 上传失败提示
+    if (!imgUrl.src) {
+      files.status = "failed";
+      files.message = "上传失败";
+      loading.value = false;
+    } else {
+      files.status = "";
+      files.message = "";
+      fileList.value.push({
+        meta_id: imgUrl.meta_id,
+        url: imgUrl.src,
+        isImage: true,
+      });
+      loading.value = false;
+    }
   }
-  s[14] = "4";
+  // 过滤非包含URL的图片
-  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+  fileList.value = fileList.value.filter((item) => {
-  s[8] = s[13] = s[18] = s[23] = "-";
+    if (item.url) return item;
-
+  });
-  var uuid = s.join("");
+  props.item.value = {
-  return uuid;
+    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);
 };
-const uploadQiniu = async (file, token, filename, md5) => {
+// 文件删除前的回调函数
-  let formData = new FormData();
+const beforeDelete = (files) => {
-  formData.append("file", file); // 通过append向form对象添加数据
+  fileList.value = fileList.value.filter((item) => {
-  formData.append("token", token);
+    if (item.url !== files.url) return item;
-  formData.append("key", filename);
+  });
-  let config = {
+  props.item.value = {
-    headers: { "Content-Type": "multipart/form-data" },
+    key: "image_uploader",
+    filed_name: props.item.key,
+    // value: fileList.value.map((item) => item.url),
+    value: fileList.value,
   };
-  // 自拍图片上传七牛服务器
+  // 完整数据回调到表单上
-  const { filekey, hash, image_info } = await qiniuUploadAPI(
+  emit("active", props.item.value);
-    "http://upload.qiniu.com/",
-    formData,
-    config
-  );
-  if (filekey) {
-    // 保存图片
-    const { data } = await saveFileAPI({
-      filename,
-      filekey,
-      hash: md5,
-      format: image_info.format,
-      height: image_info.height,
-      width: image_info.width,
-    });
-    return data;
-  }
 };
-/****************** END *******************/
+/********** 上传七牛云获取图片地址 ***********/
+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;
+// };
+
+// 上传图片返回图片URL
 const handleUpload = async (files) => {
-  // 上传图片流程
   loading.value = true;
   // 获取HASH值
   // const hash = getEtag(files.content);
@@ -155,8 +186,7 @@ const handleUpload = async (files) => {
           reject(err);
         }
         // 获取七牛token
-        const filename =
+        const filename = files.file.name; // 真实文件名
-          "uploadForm/" + formCode + "/" + uuid() + "." + files.file.name.split(".")[1];
         const getToken = await qiniuTokenAPI({
           name: filename,
           hash: md5,
@@ -167,6 +197,7 @@ const handleUpload = async (files) => {
         if (getToken.token) {
           files.status = "uploading";
           files.message = "上传中...";
+          // 返回数据库真实图片地址
           imgUrl = await uploadQiniu(files.file, getToken.token, filename, md5);
         }
         // 重复上传
@@ -195,6 +226,7 @@ var muliUpload = async (files) => {
       item.status = "";
       item.message = "";
       fileList.value.push({
+        meta_id: res.meta_id,
         url: res.src,
         isImage: true,
       });
@@ -203,63 +235,40 @@ var muliUpload = async (files) => {
   }
 };
-const afterRead = async (files) => {
+// 生成数据库真实图片地址
-  if (Array.isArray(files)) {
+const uploadQiniu = async (file, token, name, md5) => {
-    // 多张图片上传files是一个数组
+  let affix = uuidv4();
-    muliUpload(files);
+  let fileName = `uploadForm/${formCode}/${affix}.${name.split(".")[1]}`;
-  } else {
+  let formData = new FormData();
-    const imgUrl = await handleUpload(files);
+  formData.append("file", file); // 通过append向form对象添加数据
-    // 上传失败提示
+  formData.append("token", token);
-    if (!imgUrl.src) {
+  formData.append("key", fileName);
-      files.status = "failed";
+  let config = {
-      files.message = "上传失败";
+    headers: { "Content-Type": "multipart/form-data" },
-      loading.value = false;
-    } else {
-      files.status = "";
-      files.message = "";
-      fileList.value.push({
-        meta_id: imgUrl.meta_id,
-        url: imgUrl.src,
-        isImage: true,
-      });
-      loading.value = false;
-    }
-  }
-  // 过滤非包含URL的图片
-  fileList.value = fileList.value.filter((item) => {
-    if (item.url) return item;
-  });
-  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);
-};
-
-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.map((item) => item.url),
-    value: fileList.value,
   };
-  emit("active", props.item.value);
+  // 自拍图片上传七牛服务器
+  const { filekey, hash, image_info } = await qiniuUploadAPI(
+    "http://upload.qiniu.com/",
+    formData,
+    config
+  );
+  if (filekey) {
+    // 保存图片
+    const { data } = await saveFileAPI({
+      name,
+      filekey,
+      hash: md5,
+      // format: image_info.format,
+      height: image_info.height,
+      width: image_info.width,
+    });
+    return data;
+  }
 };
-const fileList = ref([
+/****************** END *******************/
-  // { 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) {