二次封装的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>