1.上传文件组件修改，可以兼容pdf预览。

src/api/file/index.ts

@@ -2,15 +2,14 @@ import request from "@/utils/request";
 import { AxiosPromise } from "axios";
 import { FileInfo } from "./types";
 
-/**
- * 上传文件
- *
- * @param file
- */
-export function uploadFileApi(file: File): AxiosPromise<FileInfo> {
+export function uploadFileApi(
+  file: File,
+  generatePdf: boolean = false
+): AxiosPromise<FileInfo> {
   const formData = new FormData();
   formData.append("file", file);
   formData.append("fileName", file.name);
+  formData.append("generatePdf", generatePdf);
   return request({
     url: "/api/v1/base/upload",
     method: "post",

src/components/PDFView/index.vue

@@ -23,6 +23,7 @@
     :show-close="false"
     destroy-on-close
     direction="rtl"
+    :append-to-body="true"
     size="972px"
   >
     <VuePdfEmbed

src/components/Upload/FilesUpload.vue

@@ -26,14 +26,31 @@
         closable
         type="success"
         @close="deleteFile(index)"
+        @click.stop.prevent="handlePreview(index)"
       >
         {{ file.name }}
       </el-tag>
     </div>
   </el-upload>
+  <el-drawer
+    v-model="PDFVisible"
+    :footer="false"
+    :header="false"
+    :show-close="false"
+    destroy-on-close
+    direction="rtl"
+    :append-to-body="true"
+    size="972px"
+  >
+    <VuePdfEmbed :source="pdfSource" annotation-layer text-layer />
+  </el-drawer>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
+import { UploadFile, UploadFiles, UploadUserFile } from "element-plus";
+import { uploadFileApi } from "@/api/file";
+import PDFView from "@/components/PDFView/index.vue";
+import VuePdfEmbed from "vue-pdf-embed";
 
 const props = defineProps({
   size: {
@@ -49,8 +66,12 @@ const props = defineProps({
     default: "",
   },
   srcList: {
-    type: Array,
-    default: [],
+    type: Array<string>,
+    default: () => [],
+  },
+  generatePdf: {
+    type: Boolean,
+    default: false,
   },
 });
 
@@ -62,9 +83,6 @@ const emit = defineEmits(["update:src", "update:srcList"]);
 const src = useVModel(props, "src", emit); //单文件用这个
 const srcList = useVModel(props, "srcList", emit); //多文件用这个
 
-import { UploadFile, UploadFiles, UploadUserFile } from "element-plus";
-import { uploadFileApi } from "@/api/file";
-
 // el-upload 绑定的值
 const fileList = ref<UploadUserFile[]>([]);
 
@@ -74,11 +92,12 @@ const handleChange = async (uploadFile: UploadFile) => {
     return;
   }
   loading.value = true;
-  uploadFileApi(uploadFile.raw as File)
+  uploadFileApi(uploadFile.raw as File, props.generatePdf)
     .then((res: any) => {
       loading.value = false;
-      src.value = res.data.fileUrl;
-      srcList.value.push(res.data.fileUrl);
+      let url = props.generatePdf ? res.data.pdfUrl : res.data.fileUrl;
+      src.value = url;
+      srcList.value.push(url);
     })
     .catch((err) => {
       ElMessage.error(err.message);
@@ -91,6 +110,16 @@ const deleteFile = (index: number) => {
   fileList.value.splice(index, 1);
   srcList.value.splice(index, 1);
 };
+
+const PDFVisible = ref(false);
+const pdfSource = ref("");
+const handlePreview = (index: number) => {
+  if (srcList.value.length > index && props.generatePdf) {
+    pdfSource.value =
+      import.meta.env.VITE_APP_UPLOAD_URL + srcList.value[index];
+    PDFVisible.value = true;
+  }
+};
 </script>
 
 <style scoped lang="scss">

src/views/demo/hooksDemo.vue

@@ -72,7 +72,11 @@
       @selected-sure="onSelectedFinish"
     />
     <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
-    <FilesUpload v-model:src="fileUrl" v-model:src-list="fileUrlList" />
+    <FilesUpload
+      v-model:src="fileUrl"
+      v-model:src-list="fileUrlList"
+      :generate-pdf="true"
+    />
     <el-button @click="testFiles">测试上传文件的值</el-button>
     <div style="height: 100px; width: 100px; overflow: hidden">
       <PDFView
@@ -97,6 +101,7 @@ import PDFView from "@/components/PDFView/index.vue";
 const fileUrl = ref(""); //单文件
 const fileUrlList = ref([]); //多文件
 const testFiles = () => {
+  console.log(import.meta.env.VITE_APP_UPLOAD_URL);
   console.log("fileUrl", fileUrl.value);
   console.log("fileUrlList", fileUrlList.value);
 };