二次封装的el-upload

<template><div class="uploadFile"><el-uploadref="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-fileref="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>