JG-CLIENT-TEMP/src/components/Upload/FilesUpload.vue

<template>
  <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    :on-change="handleChange"
    :limit="limit"
    :auto-upload="false"
    :show-file-list="false"
  >
    <el-button
      type="primary"
      :loading="loading"
      :disabled="fileList.length >= limit"
      >点击上传文件</el-button
    >
    <template #tip>
      <div class="tip" v-if="showTip">
        文件类型限制为.jpg,.jpeg,.png,word文档,pdf,大小不超过{{ size }}M
      </div>
    </template>
    <div>
      <el-tag
        class="file-item"
        v-for="(file, index) in fileList"
        :key="file.name"
        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: {
    type: Number,
    default: 4,
  },
  limit: {
    type: Number,
    default: 1,
  },
  src: {
    type: String,
    default: "",
  },
  srcList: {
    type: Array<string>,
    default: () => [],
  },
  pdfList: {
    type: Array<string>,
    default: () => [],
  },
  fileNameList: {
    type: Array<string>,
    default: () => [],
  },
  generatePdf: {
    type: Boolean,
    default: false,
  },
  showTip: {
    type: Boolean,
    default: true,
  },
});

const loading = ref(false);

const emit = defineEmits([
  "update:src",
  "update:srcList",
  "update:pdfList",
  "update:fileNameList",
  "finished",
]);

// 上传文件成功返回的值
const src = useVModel(props, "src", emit); //单文件用这个
const srcList = useVModel(props, "srcList", emit); //多文件用这个
const pdfList = useVModel(props, "pdfList", emit); //转换成pdf后的多文件用这个
const fileNameList = useVModel(props, "fileNameList", emit); //多文件上传要显示文件名

// el-upload 绑定的值
const fileList = ref<UploadUserFile[]>([]);
const resetFileList = (value: Array) => {
  fileList.value = value;
};

const handleChange = async (uploadFile: UploadFile) => {
  if (uploadFile.size! > props.size * 1048 * 1048) {
    ElMessage.warning(`上传文件不能大于${props.size}M`);
    return;
  }
  loading.value = true;
  uploadFileApi(uploadFile.raw as File, props.generatePdf)
    .then((res: any) => {
      loading.value = false;
      src.value = res.data.fileUrl;
      pdfList.value.push(res.data.pdfUrl);
      srcList.value.push(res.data.fileUrl);
      fileNameList.value.push(res.data.fileName);
      emit("finished");
    })
    .catch((err) => {
      ElMessage.error(err.message);
      loading.value = false;
    });
};

const deleteFile = (index: number) => {
  src.value = ""; //删除直接清空src即可，不用考虑是哪个，因为单文件不会有多个
  fileList.value.splice(index, 1);
  srcList.value.splice(index, 1);
  pdfList.value.splice(index, 1);
  fileNameList.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 + pdfList.value[index];
    PDFVisible.value = true;
  }
};
defineExpose({
  resetFileList,
  fileList,
});
</script>

<style scoped lang="scss">
.tip {
  font-size: 12px;
  color: #e6a23c;
  margin-top: 5px;
}
.file-item {
  margin-left: 10px;
}
</style>