在使用 Element UI 的 el-upload
组件时,可以通过 http-request
属性来自定义上传的行为。以下是一个简单的例子,展示了如何使用 axios
库来自定义上传请求:
<template>
<el-upload
:action="uploadUrl"
:http-request="uploadFile"
:on-success="handleSuccess"
:on-error="handleError">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
uploadUrl: '你的上传接口地址'
};
},
methods: {
uploadFile(request) {
const formData = new FormData();
formData.append('file', request.file); // 这里的 'file' 是后端接收文件的字段名
axios.post(this.uploadUrl, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
request.onSuccess(response.data);
})
.catch(error => {
request.onError(error);
});
},
handleSuccess(response, file, fileList) {
// 成功处理逻辑
},
handleError(err, file, fileList) {
// 错误处理逻辑
}
}
};
</script>
在这个例子中,我们定义了一个 uploadFile
方法,该方法接收一个对象 request
,它包含了上传所需的 file
(文件)、action
(上传地址)、onError
(错误处理函数)和 onSuccess
(成功处理函数)。我们使用 axios
库来发送一个 POST
请求,并将文件作为 multipart/form-data
的一部分发送到服务器。服务器响应会在 then
方法中被处理,并调用 request.onSuccess
方法,若有错误则在 catch
方法中被处理,并调用 request.onError
方法。