ZBLOG

el-upload怎么自定义上传函数

在 Element UI(或 Element Plus)中,el-upload 组件可以通过 http-request 属性自定义上传函数。以下是具体实现步骤和示例代码:


1. 基本用法

覆盖默认的上传行为,使用自定义的请求逻辑:

  1. <template>
  2. <el-upload
  3. action="#" // 必填但可随意填写(实际会被覆盖)
  4. :http-request="customUpload" // 关键:自定义上传函数
  5. :show-file-list="false"
  6. >
  7. <el-button type="primary">点击上传</el-button>
  8. </el-upload>
  9. </template>
  10. <script>
  11. export default {
  12. methods: {
  13. async customUpload(file) {
  14. // file 是用户选择的文件对象
  15. const formData = new FormData();
  16. formData.append('file', file.file); // file.file 是实际文件
  17. try {
  18. const response = await axios.post('/your-api-endpoint', formData, {
  19. headers: { 'Content-Type': 'multipart/form-data' }
  20. });
  21. console.log('上传成功:', response.data);
  22. } catch (error) {
  23. console.error('上传失败:', error);
  24. }
  25. }
  26. }
  27. };
  28. </script>

2. 关键参数说明

参数 作用
http-request 覆盖默认上传,接收一个函数(参数为包含 fileonProgress等的对象)
action 占位符(需填写但会被覆盖)
file.file 实际文件对象(通过 file.file 访问)

3. 高级功能

(1) 显示上传进度

  1. async customUpload({ file, onProgress }) {
  2. const formData = new FormData();
  3. formData.append('file', file);
  4. await axios.post('/upload', formData, {
  5. headers: { 'Content-Type': 'multipart/form-data' },
  6. onUploadProgress: (progressEvent) => {
  7. const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
  8. onProgress({ percent }); // 更新进度条
  9. }
  10. });
  11. }

(2) 多文件/额外参数

  1. formData.append('userId', '123');
  2. formData.append('files', multipleFiles); // for多文件

(3) Promise处理结果

  1. customUpload(file) {
  2. return new Promise((resolve, reject) => {
  3. yourCustomAPI.upload(file.file)
  4. .then(response => resolve(response))
  5. .catch(error => reject(error));
  6. });
  7. }

4. Element Plus注意事项

  • Element Plus:用法与 Element UI (Vue2)完全一致。
  • TypeScript:可为 http-request定义类型:
  1. interface UploadRequestOptions {
  2. file: File;
  3. onProgress?: (event: { percent: number }) => void;
  4. onSuccess?: (response: any) => void;
  5. onError?: (error: Error) => void;
  6. }
  7. const customUpload = async (options: UploadRequestOptions) => { ... };

通过以上方法,你可以完全控制上传逻辑(如改用 WebSocket、分块上传等)。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=23413

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?