好的，下面是一个使用
Element UI 二次封装的 Upload 上传组件的示例代码：
```
<template>
<div>
<el-upload
:action="uploadUrl"
:headers="headers"
:data="formData"
:multiple="multiple"
:show-file-list="showFileList"
:limit="limit"
:on-exceed="onExceed"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
:on-progress="onProgress"
>
<el-
button type="primary" :disabled="uploading">{{
buttonText }}</el-
button>
<div slot="tip" class="el-upload__tip">{{ tip }}</div>
</el-upload>
</div>
</template>
<script>
export default {
name: "MyUpload",
props: {
uploadUrl: {
type: String,
default: ""
},
headers: {
type: Object,
default: () => ({})
},
formData: {
type: Object,
default: () => ({})
},
multiple: {
type: Boolean,
default: false
},
showFileList: {
type: Boolean,
default: true
},
limit: {
type: Number,
default: 0
},
buttonText: {
type: String,
default: "上传文件"
},
tip: {
type: String,
default: "只能上传jpg/png文件，且不超过500kb"
}
},
data() {
return {
uploading: false
};
},
methods: {
onExceed(files, fileList) {
this.$message.warning(`只能上传${this.limit}个文件`);
},
beforeUpload(file) {
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
const isLt500K = file.size / 1024 < 500;
if (!isJPG) {
this.$message.error("上传图片只能是 JPG/PNG 格式!");
return false;
}
if (!isLt500K) {
this.$message.error("上传图片大小不能超过 500KB!");
return false;
}
return true;
},
onSuccess(response, file, fileList) {
this.uploading = false;
this.$emit("upload-success", response, file, fileList);
},
onError(err, file, fileList) {
this.uploading = false;
this.$emit("upload-error", err, file, fileList);
},
onProgress(event, file, fileList) {
this.uploading = true;
this.$emit("upload-progress", event, file, fileList);
}
}
};
</script>
<style>
/* 可以根据自己的需要修改样式 */
.el-upload__tip {
font-size: 14px;
color: #999;
margin-top: 10px;
}
</style>
```
这个 Upload 组件支持以下 props：
- `uploadUrl`：上传文件的接口地址
- `headers`：上传请求的 headers
- `formData`：上传请求的 formData
- `multiple`：是否支持多选文件
- `showFileList`：是否显示已上传文件列表
- `limit`：最多上传文件个数
- `
buttonText`：上传按钮的文本
- `tip`：上传提示信息
这个 Upload 组件还支持以下事件：
- `upload-success`：上传成功的回调函数，参数为 response、file 和 fileList
- `upload-error`：上传失败的回调函数，参数为 err、file 和 fileList
- `upload-progress`：上传进度的回调函数，参数为 event、file 和 fileList
使用示例：
```
<template>
<div>
<my-upload
:upload-url="uploadUrl"
:headers="headers"
:form-data="formData"
:multiple="multiple"
:show-file-list="showFileList"
:limit="limit"
:
button-text="
buttonText"
:tip="tip"
@upload-success="onUploadSuccess"
@upload-error="onUploadError"
@upload-progress="onUploadProgress"
></my-upload>
</div>
</template>
<script>
import MyUpload from "@/components/MyUpload";
export default {
components: {
MyUpload
},
data() {
return {
uploadUrl: "https://xxx.com/upload",
headers: {
token: "xxx"
},
formData: {
type: "avatar"
},
multiple: false,
showFileList: true,
limit: 1,
buttonText: "上传头像",
tip: "只能上传jpg/png文件，且不超过500kb"
};
},
methods: {
onUploadSuccess(response, file, fileList) {
console.log("上传成功", response, file, fileList);
},
onUploadError(err, file, fileList) {
console.log("上传失败", err, file, fileList);
},
onUploadProgress(event, file, fileList) {
console.log("上传进度", event, file, fileList);
}
}
};
</script>
```
最低0.47元/天 解锁文章
1738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
