新增上传文件控件

+<!--
+ * @Date: 2022-08-31 16:16:49
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-21 14:54:30
+ * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
+ * @Description: 文件上传控件
+-->
+<template>
+  <div class="file-uploader-field">
+    <div class="label">
+      {{ item.component_props.label
+      }}<span v-if="item.component_props.required">&nbsp;*</span>
+    </div>
+    <div style="font-size: 0.9rem; padding-top: 0.5rem">
+      <p
+        v-for="file in fileList"
+        :key="index"
+        style="padding-left: 1rem; margin-bottom: 0.5rem"
+      >
+        {{ file.filename }}&nbsp;&nbsp;<span
+          style="color: #e32525"
+          @click="beforeDelete(file)"
+          >移除</span
+        >
+      </p>
+    </div>
+    <div style="padding: 1rem">
+      <van-uploader
+        :name="item.name"
+        upload-icon="add"
+        accept="*"
+        :before-read="beforeRead"
+        :after-read="afterRead"
+        :before-delete="beforeDelete"
+        :multiple="item.component_props.multiple"
+      >
+        <van-button icon="plus" type="primary">上传文件</van-button>
+      </van-uploader>
+    </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>
+    <van-divider />
+  </div>
+
+  <van-overlay :show="loading">
+    <div class="wrapper" @click.stop>
+      <van-loading vertical color="#FFFFFF">上传中...</van-loading>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+/**
+ * 文件上传
+ * @param name[String] 组件名称
+ * @param file_type[Array] 文件上传类型
+ * @param multiple[Boolean] 文件多选
+ */
+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.file_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) => {
+  // 类型限制
+  // const file_types = _.map(
+  //   props.item.component_props.file_type.split("/"),
+  //   (item) => `video/${item}`
+  // );
+
+  let flag = true;
+  // if (_.isArray(file)) {
+  //   // 多张文件
+  //   const types = _.difference(_.uniq(_.map(file, (item) => item.type)), file_types); // 数组返回不能上传的类型
+  //   if (types.length) {
+  //     flag = false;
+  //     showFailToast("请上传指定格式文件");
+  //   }
+  // } else {
+  //   if (!_.includes(file_types, file.type)) {
+  //     showFailToast("请上传指定格式文件");
+  //     flag = false;
+  //   }
+  // }
+  return flag;
+};
+
+// 文件读取完成后的回调函数
+const afterRead = async (files) => {
+  if (Array.isArray(files)) {
+    // 多张文件上传files是一个数组
+    muliUpload(files);
+  } else {
+    const imgUrl = await handleUpload(files);
+    // 上传失败提示
+    if (!imgUrl.src) {
+      files.status = "failed";
+      files.message = "上传失败";
+      loading.value = false;
+    } else {
+      files.status = "";
+      files.message = "";
+      fileList.value.push({
+        // meta_id: imgUrl.meta_id,
+        filename: files.file.name,
+        url: imgUrl.src,
+        // isImage: true,
+      });
+      loading.value = false;
+    }
+  }
+  // 过滤非包含URL的文件
+  fileList.value = fileList.value.filter((item) => {
+    if (item.url) return item;
+  });
+  props.item.value = {
+    key: "file_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: "file_uploader",
+    filed_name: props.item.key,
+    // value: fileList.value.map((item) => item.url),
+    value: fileList.value,
+  };
+  // 完整数据回调到表单上
+  emit("active", props.item.value);
+};
+
+/********** 上传七牛云获取文件地址 ***********/
+const loading = ref(false);
+const formCode = $route.query.code; // 表单code
+
+// 上传文件返回文件URL
+const handleUpload = async (files) => {
+  loading.value = true;
+  // 获取HASH值
+  // const hash = getEtag(files.content);
+  return new Promise((resolve, reject) => {
+    // 获取MD5值
+    const bmf = new BMF();
+    bmf.md5(
+      files.file,
+      async (err, md5) => {
+        if (err) {
+          console.log(err);
+          reject(err);
+        }
+        // 获取七牛token
+        const filename = files.file.name; // 真实文件名
+        const getToken = await qiniuTokenAPI({
+          name: filename,
+          hash: md5,
+        });
+        // 文件上传七牛云
+        let imgUrl = "";
+        // 第一次上传
+        if (getToken.token) {
+          files.status = "uploading";
+          files.message = "上传中...";
+          // 返回数据库真实文件地址
+          imgUrl = await uploadQiniu(files.file, getToken.token, filename, md5);
+        }
+        // 重复上传
+        if (getToken.data) {
+          imgUrl = getToken.data;
+        }
+        resolve(imgUrl);
+      },
+      (process) => {
+        //计算进度
+      }
+    );
+  });
+};
+
+// 多选文件上传遍历
+var muliUpload = async (files) => {
+  for (let item of files) {
+    const res = await handleUpload(item);
+    // 上传失败提示
+    if (!res.src) {
+      item.status = "failed";
+      item.message = "上传失败";
+      loading.value = false;
+    } else {
+      item.status = "";
+      item.message = "";
+      fileList.value.push({
+        // meta_id: res.meta_id,
+        filename: item.file.name,
+        url: res.src,
+        // isImage: true,
+      });
+      loading.value = false;
+    }
+  }
+};
+
+// 生成数据库真实文件地址
+const uploadQiniu = async (file, token, name, md5) => {
+  // let affix = uuidv4();
+  let fileName = `uploadForm/${formCode}/${md5}.${name.split(".")[1]}`;
+  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({
+      name,
+      filekey,
+      hash: md5,
+      // format: image_info.format,
+      // height: image_info.height,
+      // width: image_info.width,
+    });
+    return data;
+  }
+};
+
+/****************** END *******************/
+
+// 校验模块
+const validFileUploader = () => {
+  // 必填项 未上传文件
+  if (props.item.component_props.required && !fileList.value.length) {
+    show_empty.value = true;
+  } else {
+    show_empty.value = false;
+  }
+  return !show_empty.value;
+};
+
+defineExpose({ validFileUploader });
+</script>
+
+<style lang="less" scoped>
+.file-uploader-field {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+
+  .type-text {
+    font-size: 0.9rem;
+    margin-left: 1rem;
+    padding-bottom: 1rem;
+    color: gray;
+  }
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+</style>

@@ -10,6 +10,7 @@ import DatePickerField from '@/components/DatePickerField/index.vue'
 import TimePickerField from '@/components/TimePickerField/index.vue'
 import TimePickerField from '@/components/TimePickerField/index.vue'
 import DateTimePickerField from '@/components/DateTimePickerField/index.vue'
 import DateTimePickerField from '@/components/DateTimePickerField/index.vue'
 import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
 import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
+import FileUploaderField from '@/components/FileUploaderField/index.vue'
 import PhoneField from '@/components/PhoneField/index.vue'
 import PhoneField from '@/components/PhoneField/index.vue'
 import EmailField from '@/components/EmailField/index.vue'
 import EmailField from '@/components/EmailField/index.vue'
 import SignField from '@/components/SignField/index.vue'
 import SignField from '@/components/SignField/index.vue'
@@ -98,6 +99,9 @@ export function createComponentType(data) {
     if (item.component_props.name === 'image_uploader') {
     if (item.component_props.name === 'image_uploader') {
       item.component = ImageUploaderField;
       item.component = ImageUploaderField;
     }
     }
+    if (item.component_props.name === 'file_uploader') {
+      item.component = FileUploaderField;
+    }
     if (item.component_props.name === 'phone') {
     if (item.component_props.name === 'phone') {
       item.name = item.key;
       item.name = item.key;
       item.component = PhoneField;
       item.component = PhoneField;

@@ -169,8 +169,9 @@ onMounted(async () => {
 });
 });
 
 
 // 处理没有绑定值的组件的赋值
 // 处理没有绑定值的组件的赋值
-// 图片上传，电子签名，评分组件
+// 图片上传，文件上传，电子签名，评分组件
 const image_uploader = ref(null);
 const image_uploader = ref(null);
+const file_uploader = ref(null);
 const sign = ref(null);
 const sign = ref(null);
 const rate_picker = ref(null);
 const rate_picker = ref(null);
 
 
@@ -179,6 +180,9 @@ const onActive = (item) => {
   if (item.key === "image_uploader") {
   if (item.key === "image_uploader") {
     postData.value[item.filed_name] = item.value;
     postData.value[item.filed_name] = item.value;
   }
   }
+  if (item.key === "file_uploader") {
+    postData.value[item.filed_name] = item.value;
+  }
   if (item.key === "sign") {
   if (item.key === "sign") {
     postData.value[item.filed_name] = item.value;
     postData.value[item.filed_name] = item.value;
   }
   }
@@ -205,6 +209,18 @@ const validOther = () => {
       }
       }
     });
     });
   }
   }
+  if (file_uploader.value) {
+    // 文件上传
+    file_uploader.value.forEach((item, index) => {
+      if (!file_uploader.value[index].validFileUploader()) {
+        valid = {
+          status: file_uploader.value[index].validFileUploader(),
+          key: "file_uploader",
+        };
+        return false;
+      }
+    });
+  }
   if (sign.value) {
   if (sign.value) {
     // 电子签名
     // 电子签名
     sign.value.forEach((item, index) => {
     sign.value.forEach((item, index) => {