好的，下面是一个使用
Element UI 二次封装的
Upload 上传组件的示例代码：
```
<template>
<div>
<
el-
upload
:action="
uploadUrl"
:headers="headers"
:data="formData"
:multiple="multiple"
:show-file-list="showFil
eList"
:limit="limit"
:on-exceed="onExceed"
:before-
upload="before
Upload"
: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: "My
Upload",
props: {
uploadUrl: {
type: String,
default: ""
},
headers: {
type: Object,
default: () => ({})
},
formData: {
type: Object,
default: () => ({})
},
multiple: {
type: Boolean,
default: false
},
showFil
eList: {
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, fil
eList) {
this.$message.warning(`只能
上传${this.limit}个文件`);
},
before
Upload(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, fil
eList) {
this.
uploading = false;
this.$emit("
upload-success", response, file, fil
eList);
},
onError(err, file, fil
eList) {
this.
uploading = false;
this.$emit("
upload-error", err, file, fil
eList);
},
onProgress(event, file, fil
eList) {
this.
uploading = true;
this.$emit("
upload-progress", event, file, fil
eList);
}
}
};
</script>
<style>
/* 可以根据自己的需要修改样式 */
.
el-
upload__tip {
font-size: 14px;
color: #999;
margin-top: 10px;
}
</style>
```
这个
Upload 组件支持以下 props：
- `
uploadUrl`：
上传文件的接口地址
- `headers`：
上传请求的 headers
- `formData`：
上传请求的 formData
- `multiple`：是否支持多选文件
- `showFil
eList`：是否显示已
上传文件列表
- `limit`：最多
上传文件个数
- `buttonText`：
上传按钮的文本
- `tip`：
上传提示信息
这个
Upload 组件还支持以下事件：
- `
upload-success`：
上传成功的回调函数，参数为 response、file 和 fil
eList
- `
upload-error`：
上传失败的回调函数，参数为 err、file 和 fil
eList
- `
upload-progress`：
上传进度的回调函数，参数为 event、file 和 fil
eList
使用示例：
```
<template>
<div>
<my-
upload
:
upload-url="
uploadUrl"
:headers="headers"
:form-data="formData"
:multiple="multiple"
:show-file-list="showFil
eList"
:limit="limit"
:button-text="buttonText"
:tip="tip"
@
upload-success="on
UploadSuccess"
@
upload-error="on
UploadError"
@
upload-progress="on
UploadProgress"
></my-
upload>
</div>
</template>
<script>
import My
Upload from "@/components/My
Upload";
export default {
components: {
My
Upload
},
data() {
return {
uploadUrl: "https://xxx.com/
upload",
headers: {
token: "xxx"
},
formData: {
type: "avatar"
},
multiple: false,
showFil
eList: true,
limit: 1,
buttonText: "
上传头像",
tip: "只能
上传jpg/png文件，且不超过500kb"
};
},
methods: {
on
UploadSuccess(response, file, fil
eList) {
console.log("
上传成功", response, file, fil
eList);
},
on
UploadError(err, file, fil
eList) {
console.log("
上传失败", err, file, fil
eList);
},
on
UploadProgress(event, file, fil
eList) {
console.log("
上传进度", event, file, fil
eList);
}
}
};
</script>
```
本文介绍如何使用Element UI的upload组件实现手动上传，并将多张图片合并成一次请求发送到PHP后台。关键在于设置auto-upload为false，并自定义http-request属性。在覆盖默认上传行为时，需注意formData.append方法的使用，图片名需包含在数组中（如image[]），以确保后台能接收到所有图片。
最低0.47元/天 解锁文章
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
