【vue3+elementplus】文件上传

二次封装的el-upload

<template>
  <div class="uploadFile">
    <el-upload
      ref="upload"
      :action="props.action"
      :accept="props.accept"
      :on-progress="handleProgress"
      :on-preview="handlePreview"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :before-upload="handleBeforeUpload"
      :headers="props.headers"
      :name="props.name"
      :limit="props.limit"
      :show-file-list="props.showfilelist"
      :auto-upload="autoUpload"
    >
      <el-button class="swagger" type="primary">{{ props.btnText }}</el-button>
    </el-upload>
    <el-progress :percentage="uploadPercentage" v-if="uploadPercentage !== 0">
    </el-progress>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  UploadProps,
  UploadInstance,
  UploadRawFile,
  UploadRequestOptions,
} from "element-plus";
import { genFileId } from "element-plus";

export default defineComponent({
  name: "UploadFile",
  props: {
    action: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "multipartFile",
    },
    btnText: {
      type: String,
      default: "文件上传",
    },
    showfilelist: {
      type: Boolean,
      default: true,
    },
    limit: {
      type: Number,
      default: 1,
    },
    headers: {
      type: Object,
      default() {
        return {};
      },
    },
    autoUpload: {
      type: Boolean,
      default: true,
    },
    accept: {
      type: String,
      default: "",
    },
  },
  emits: [
    "handleSuccess",
    "handleError",
    "handleProgress",
    "handleRemove",
    "handlePreview",
    "handleBeforeUpload",
    "handleHttpRequest",
  ],
  setup(props: any, { emit }) {
    let uploadPercentage = ref(0);

    const upload = ref<UploadInstance>();

    const handleSuccess: UploadProps["onSuccess"] = (
      response,
      uploadFile,
      uploadFiles
    ) => {
      if (uploadPercentage.value === 100) {
        emit("handleSuccess", response, uploadFile, uploadFiles);
      }
    };

    const handleError: UploadProps["onError"] = (
      errors,
      uploadFile,
      uploadFiles
    ) => {
      emit("handleError", errors, uploadFile, uploadFiles);
    };

    const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
      uploadPercentage.value = 0;
      emit("handleRemove", uploadFile, uploadFiles);
    };

    const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
      if (props.limit === 1) {
        upload.value!.clearFiles();
        const file = files[0] as UploadRawFile;
        file.uid = genFileId();
        upload.value!.handleStart(file);
        upload.value!.submit();
      }
    };

    const handleProgress: UploadProps["onProgress"] = (
      evt,
      uploadFile,
      uploadFiles
    ) => {
      if (evt.lengthComputable) {
        const percent = Math.round((evt.loaded / evt.total) * 100);
        // 更新进度条
        uploadPercentage.value = percent;
        emit("handleProgress", evt, uploadFile, uploadFiles);
      }
    };

    const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
      emit("handlePreview", uploadFile);
    };

    const handleBeforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
      const fileType = rawFile.type;
      if (fileType === props.accept) {
        return true;
      } else {
        emit("handleBeforeUpload", rawFile);
        return false;
      }
    };

    const handleHttpRequest = (options: UploadRequestOptions) => {
      emit("handleHttpRequest", options);
    };

    return {
      props,
      upload,
      uploadPercentage,
      handleProgress,
      handlePreview,
      handleSuccess,
      handleError,
      handleRemove,
      handleExceed,
      handleBeforeUpload,
      handleHttpRequest,
    };
  },
});
</script>

使用：

<template>
  <upload-file
    ref="uploadfile"
    action="/api-admin-service/admin/api/basic/uploadFile"
    name="multipartFile"
    btnText="swagger导入定义"
    accept="application/json"
    @handleSuccess="handleSuccess"
    @handleError="handleError"
    @handleProgress="handleProgress"
    @handlePreview="handlePreview"
    @handleBeforeUpload="handleBeforeUpload"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import UploadFile from "@/components/UploadFile.vue";
import { isEmpty } from "@/utils";
import { ElMessage } from "element-plus";

export default defineComponent({
  components: {
    UploadFile,
  },
  emits: ["handleSwagger"],
  setup(props: any, { emit }) {
    let uploadPercentage = ref(0);

    let uploadfile = ref();

    const handleSuccess = (res: any, file: any, fileList: any) => {
      if (res.status === 200) {
      	// file.name是当前上传的文件名，可以通过赋值的方式改变文件名
        file.name = "待导入清单:" + file.name;
        ... // 上传成功要做的操作
      } else {
        ElMessage.error(res.message || "导入失败");
        // 导入失败要清空文件列表
        uploadfile.value.upload.clearFiles();
        return false;
      }
    };
    
    const handleError = (err: any, file: any, fileList: any) => {
      ElMessage.error(err);
    };

    const handlePreview = (file: any) => {
      if (file?.response?.status === 200) {
        ...
      }
    };
	
	// 文件导入之前
    const handleBeforeUpload = (file: any) => {
      ElMessage.error("只支持上传json格式的文件");
    };

    return {
      uploadfile,
      uploadPercentage,
      handleProgress,
      handlePreview,
      handleSuccess,
      handleError,
      handleBeforeUpload,
    };
  },
});
</script>