vue3+element-plus上传文件，预览文件

vue3+ts+element-plus上传文件，预览文件

场景：使用element-plus的el-upload标签，手动上传文件,可预览docx,xlsx,pdf,jpg,jpeg,png(本地资源以及网络资源）。

1、使用el-upload标签

检查上传文件的文件格式与大小

上传的附件信息在fileList中，组装接口所需数据进行上传

使用docx-preview插件预览docx类型的文件

使用xlsx插件预览xlsx文件

这里遇到了问题，引入xlsx插件的时候出现"export ‘default’ (imported as ‘XLSX’) was not found in 'xlsx’报错
解决：

直接将import XLSX from 'xlsx’改为import * as XLSX from 'xlsx/xlsx.mjs’即可

图片预览

pdf预览

完整代码

<template>
  <el-dialog
    v-model="uploadDialogVisible"
    title="上传"
    width="800px"
    label-width="100px"
    @close="uploadDialogVisible = false"
  >
    <el-upload
      ref="uploadRef"
      v-model:file-list="fileList"
      class="upload-demo"
      drag
      :multiple="true"
      :auto-upload="false"
      :accept="props.allowType"
      :limit="props.limit"
      :before-upload="beforeAvatarUpload"
      :on-preview="previewFun"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        <em>选择文件</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          支持格式：{{ props.allowType }};限制大小{{ props.size }}M
        </div>
      </template>
    </el-upload>
    <template #footer>
      <span class="dialog-footer">
        <el-button round @click="cancelFun">取消</el-button>
        <el-button round type="primary" @click="submitFun">确定</el-button>
        <el-button round type="primary" @click="getFileList"
          >获取文件</el-button
        >
      </span>
    </template>
  </el-dialog>
  <!-- 查看 -->
  <viewer ref="fileViewerRef" :dialog-doc="dialogDoc" />
</template>
<script setup lang="ts">
/* eslint-disable */
import { defineProps, defineEmits, ref, reactive, computed } from "vue";
import type {
  FormInstance,
  UploadProps,
  UploadUserFile,
  UploadRawFile
} from "element-plus";
import { ElMessage } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import { api } from "@/api";
import SparkMD5 from "spark-md5";
import Viewer from "./viewer.vue";

interface Props {
  uploadDialogVisible?: boolean;
  allowType?: string;
  limit?: number;
  fileList?: any;
  size?: number;
  fileExtendId?: string;
  fileCategory?: number;
  folderName?: string;
  systemSource?: string;
  uploadUrl?: string;
}
//props
const props: any = withDefaults(defineProps<Props>(), {
  uploadDialogVisible: false,
  allowType: "doc,docx,jpg,jpeg,png,xlsx,pdf",
  limit: 5,
  size: 5,
  fileExtendId: "",
  fileCategory: 2,
  folderName: "ceshi",
  systemSource: "ceshi",
  uploadUrl: "http://192.168.188.3:7001"
});

const uploadDialogVisible = computed(() => {
  return props.uploadDialogVisible;
});

const uploadRef = ref<FormInstance>();
const fileList = ref(([] as any));
const fileExtendId = ref("682D0E35121A4D4E831714CDACD5A18E");

const beforeAvatarUpload = () => {
  const flag = ref(true);
  fileList.value.forEach((item: any) => {
    console.log(item);
    const type = item.name.split(".")[1];
    if (props.allowType.indexOf(type) == -1) {
      ElMessage({
        type: "error",
        message: `格式错误,支持格式:${props.allowType}!`
      });
      flag.value = false;
      return;
    } else if (item.size / 1024 / 1024 > props.size) {
      ElMessage.error(`文件最大${props.size}MB!`);
      flag.value = false;
      return;
    }
  });
  return flag.value;
};

//取消
const cancelFun = () => {
  emit("cancel", false);
};

const submitFun = (formEl: FormInstance | undefined) => {
  // 判断是否有文件需要上传
  if (fileList.value.length) {
    const flag = beforeAvatarUpload();
    if (!flag) {
      return;
    }
    // 组合数据
    const params = new FormData();
    const fileConfigs: any = [];
    if (fileList.value.length) {
      fileList.value.forEach((item: any, index: number) => {
        // 判断一下是不是新上传的
        if (item.id) {
          fileConfigs.push({
            fileId: item.id,
            fileName: item.name,
            sort: ++index, // 必须从1开始，依次12345往下
            md5: ""
          });
        } else {
          params.append("file", item.raw);
          const spark = new SparkMD5.ArrayBuffer();
          spark.append(item.raw);
          const md5 = spark.end();
          fileConfigs.push({
            fileId: "",
            fileName: item.name,
            sort: ++index, // 必须从1开始，依次12345往下
            md5: md5
          });
      };
      }
      );
    }
    params.append("fileExtendId", fileExtendId.value);
    params.append("fileCategory", props.fileCategory);
    params.append("folderName", props.folderName);
    params.append("systemSource", props.systemSource);
    params.append("FileConfigs", JSON.stringify(fileConfigs));
    console.log(params);
    api.adminCenter.UploadFiles(params).then((res: any) => {
      if (res.status.code == 200) {
        fileExtendId.value = res.result.fileExtendId;
        // 拿到了组合id,继续做业务
      }
    });
  } else {
    console.log("直接做业务");
  }
};

// 获取附件
const getFileList = () => {
  api.adminCenter
    .GetFileList({
      fileExtendIds: fileExtendId.value
    })
    .then((res: any) => {
      if (res.status.code == 200) {
        res.result.forEach((ele: any) => {
          ele.name = ele.fileOldName;
          fileList.value.push(ele);
        });
      } else {
      }
    });
};

let dialogDoc: any = ref(false);
const fileViewerRef = ref<any>(null);
const previewFun = (file: any) => {
  console.log(file.halfPath);
  dialogDoc.value = true;
  let data = file;
  // 上传过的文件组成完成的网络路径
  if (file.halfPath) {
    data.src = `${props.uploadUrl}${file.halfPath}`;
  }

  const suffix = data.name.split(".")[1];
  if (suffix == "docx") {
    fileViewerRef.value?.viewDocx(data);
  } else if (suffix == "xlsx") {
    fileViewerRef.value?.viewXlsx(data);
  } else if (suffix == "jpg" || suffix == "jpeg" || suffix == "png") {
    fileViewerRef.value?.viewImg(data);
  } else if (suffix == "pdf") {
    fileViewerRef.value?.viewPdf(data);
  }
};
// 声明emit
const emit = defineEmits(["cancel"]);
</script>

<template>
  <!-- doc -->
  <el-dialog
    v-model="dialogDocxValue"
    :title="dialogTitle"
    width="80%"
    @close="dialogDocxClose"
  >
    <div ref="docxRef" class="word-div"></div>
  </el-dialog>

  <!-- xlsx -->
  <el-dialog
    v-model="dialogXlsxValue"
    :title="dialogTitle"
    width="80%"
    @close="dialogXlsxClose"
  >
    <div ref="xlsxRef" class="xlsx-div">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane
          v-for="(item, index) in excelSheet"
          :key="index"
          :label="item.name"
          :name="item.name"
        >
          <div class="table" v-html="item.html"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>

  <!-- 图片 -->
  <el-dialog
    v-model="dialogImgValue"
    :title="dialogTitle"
    width="80%"
    @close="dialogImgClose"
  >
    <div class="img-div">
      <el-image :src="fileData.src" :alt="fileData.fileOldName" />
    </div>
  </el-dialog>

  <!-- pdf -->
  <el-dialog
    v-model="dialogPdfValue"
    :title="dialogTitle"
    width="80%"
    @close="dialogPdfClose"
  >
    <div class="pdf-div">
      <iframe
        id="pdfRef"
        :src="iframeUrl"
        frameborder="0"
        style="width: 100%; height: 99%"
      ></iframe>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import axios from "axios";
import { defineProps, ref, reactive, computed, nextTick } from "vue";
import { renderAsync } from "docx-preview";
import * as XLSX from "xlsx";
interface Props {
  dialogDocx?: boolean;
  dialogXlsx?: boolean;
  dialogTitle?: string;
}
const props: any = withDefaults(defineProps<Props>(), {
  dialogDocx: false,
  dialogTitle: "",
  dialogXlsx: false
});
const dialogDocxValue: any = ref(false);
let dialogTitle = computed(() => {
  return props.dialogTitle;
});
const fileHtml = ref("");

const docxRef = ref<any>();
// doc 文档预览
const viewDocx = (data: any) => {
  docxRef.value = "";
  dialogDocxValue.value = true;
  console.log(data);
  if (data.src) {
    // 已上传的文件
    axios({
      url: data.src,
      method: "get",
      responseType: "blob"
    }).then((res) => {
      console.log(res);
      if (res.status == 200) {
        const content = res.data;
        const blob = new Blob([content]);
        nextTick(() => {
          dialogDocxValue.value = true;
          renderAsync(blob, docxRef.value);
          dialogTitle = data.fileOldName || data.name;
        });
      }
    });
  } else {
    // 本地文件
    const blob = new Blob([data.raw]);
    nextTick(() => {
      dialogDocxValue.value = true;
      renderAsync(blob, docxRef.value);
      dialogTitle = data.fileOldName || data.name;
    });
  }
};
const dialogXlsxValue: any = ref(false);
const excelSheet: any = ref([]);
const activeName = ref("");
const dialogDocxClose = () => {
  dialogDocxValue.value = false;
  docxRef.value = "";
};
// xlsx 预览
const viewXlsx = (data: any) => {
  dialogXlsxValue.value = true;
  console.log(data);
  if (data.src) {
    axios({
      url: data.src,
      method: "get",
      responseType: "blob"
    }).then((res) => {
      console.log(res);
      if (res.status == 200) {
        const content = res.data;
        // const blob = new Blob(content);
        const reader = new FileReader();
        reader.readAsArrayBuffer(content);
        reader.onload = function (loadEvent: any) {
          const arrayBuffer = loadEvent.target["result"];
          const workbook = XLSX.read(new Uint8Array(arrayBuffer), {
            type: "array"
          });
          const list = [];
          const sheetNames = workbook.SheetNames;
          activeName.value = sheetNames[0];
          for (const p of sheetNames) {
            let html = "";
            try {
              html = XLSX.utils.sheet_to_html(workbook.Sheets[p]);
            } catch (e) {
              html = "";
            }
            const map = {
              name: p,
              html: html
            };
            list.push(map);
          }
          excelSheet.value = list;
          dialogTitle = data.fileName || data.name;
        };
      }
    });
  } else {
    const blob = new Blob([data.raw]);
    const reader = new FileReader();
    reader.readAsArrayBuffer(blob);
    reader.onload = function (loadEvent: any) {
      const arrayBuffer = loadEvent.target["result"];
      const workbook = XLSX.read(new Uint8Array(arrayBuffer), {
        type: "array"
      });
      const list = [];
      const sheetNames = workbook.SheetNames;
      activeName.value = sheetNames[0];
      for (const p of sheetNames) {
        let html = "";
        try {
          html = XLSX.utils.sheet_to_html(workbook.Sheets[p]);
        } catch (e) {
          html = "";
        }
        const map = {
          name: p,
          html: html
        };
        list.push(map);
      }
      excelSheet.value = list;
      dialogTitle = data.fileName || data.name;
    };
  }
};

const dialogXlsxClose = () => {
  dialogXlsxValue.value = false;
  excelSheet.value = "";
  activeName.value = "";
};
const fileData: any = ref({});
const dialogImgValue: any = ref(false);
// 图片预览
const viewImg = (data: any) => {
  if (data.src) {
    // 已上传的图片
    fileData.value = data;
  } else {
    // 本地图片
    const freader = new FileReader();
    freader.readAsDataURL(data.raw);
    freader.onload = (e: any) => {
      fileData.value = {
        src: e.target.result,
        id: new Date(),
        fileName: data.fileOldName || data.name
      };
    };
  }
  dialogTitle = data.fileOldName || data.name;
  dialogImgValue.value = true;
};
const dialogImgClose = () => {
  dialogImgValue.value = false;
};

const dialogPdfValue: any = ref(false);
const iframeUrl: any = ref("");
const pdfRef = ref<any>();
const viewPdf = (data: any) => {
  if (data.src) {
    axios({
      url: data.src,
      method: "get",
      responseType: "blob"
    }).then((res) => {
      if (res.status == 200) {
        // 把文件流转化为url
        iframeUrl.value = URL.createObjectURL(res.data);
        dialogPdfValue.value = true;
      }
    });
  } else {
    iframeUrl.value = URL.createObjectURL(data.raw);
    dialogPdfValue.value = true;
  }
};
const dialogPdfClose = () => {
  dialogPdfValue.value = false;
};
defineExpose({
  viewDocx,
  viewXlsx,
  viewImg,
  viewPdf
});
</script>
<style scoped lang="scss">
.word-div {
  height: calc(70vh);
  overflow: auto;
}
.xlsx-div {
  height: calc(70vh);
  overflow: auto;
}
.img-div {
  height: calc(70vh);
  overflow: auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.pdf-div {
  height: calc(70vh);
  overflow: auto;
}
</style>
<style lang="scss">
.xlsx-div {
  .table-html-wrap table {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #e8eaec;
    border-collapse: collapse;
    // margin: auto;
  }

  .table-html-wrap table td {
    border-left: 1px solid #e8eaec;
    border-top: 1px solid #e8eaec;
    white-space: wrap;
    text-align: left;
    min-width: 100px;
    padding: 4px;
  }

  table {
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    width: 100%;
    // overflow: auto;

    tr {
      height: 44px;
    }

    td {
      min-width: 200px;
      max-width: 400px;
      padding: 4px 8px;
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
  }

  .el-tabs--border-card > .el-tabs__content {
    overflow-x: auto;
  }
}
</style>