在 Element UI(或 Element Plus)中,el-upload
组件可以通过 http-request
属性自定义上传函数。以下是具体实现步骤和示例代码:
1. 基本用法
覆盖默认的上传行为,使用自定义的请求逻辑:
<template>
<el-upload
action="#" // 必填但可随意填写(实际会被覆盖)
:http-request="customUpload" // 关键:自定义上传函数
:show-file-list="false"
>
<el-button type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
async customUpload(file) {
// file 是用户选择的文件对象
const formData = new FormData();
formData.append('file', file.file); // file.file 是实际文件
try {
const response = await axios.post('/your-api-endpoint', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
console.log('上传成功:', response.data);
} catch (error) {
console.error('上传失败:', error);
}
}
}
};
</script>
2. 关键参数说明
参数 | 作用 |
---|---|
http-request |
覆盖默认上传,接收一个函数(参数为包含 file 、onProgress 等的对象) |
action |
占位符(需填写但会被覆盖) |
file.file |
实际文件对象(通过 file.file 访问) |
3. 高级功能
(1) 显示上传进度
async customUpload({ file, onProgress }) {
const formData = new FormData();
formData.append('file', file);
await axios.post('/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (progressEvent) => {
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
onProgress({ percent }); // 更新进度条
}
});
}
(2) 多文件/额外参数
formData.append('userId', '123');
formData.append('files', multipleFiles); // for多文件
(3) Promise处理结果
customUpload(file) {
return new Promise((resolve, reject) => {
yourCustomAPI.upload(file.file)
.then(response => resolve(response))
.catch(error => reject(error));
});
}
4. Element Plus注意事项
- Element Plus:用法与 Element UI (Vue2)完全一致。
- TypeScript:可为
http-request
定义类型:
interface UploadRequestOptions {
file: File;
onProgress?: (event: { percent: number }) => void;
onSuccess?: (response: any) => void;
onError?: (error: Error) => void;
}
const customUpload = async (options: UploadRequestOptions) => { ... };
通过以上方法,你可以完全控制上传逻辑(如改用 WebSocket、分块上传等)。
内容由零声教学AI助手提供,问题来源于学员提问