【UI】饿了么 el-upload如何上传到不同的路径, 根据不同情况上传指不同的接口，不同的路径

fruge365

发布于 2025-12-15 10:36:51

2120

在 Element UI 的 Upload 组件中，可以通过在 el-upload 组件中定义 before-upload 回调函数，然后根据上传文件类型等条件在函数中改变 action 属性来实现上传到不同的路径。

template中

<el-upload  
  ref="upload"
  class="avatar-uploader"  
  :before-upload="beforeAvatarUpload"  
  :show-file-list="false"  
  :on-success="handleAvatarSuccess"  
>  
  <el-button size="small" type="primary">点击上传</el-button>  
</el-upload>

script中

methods: {  
  beforeAvatarUpload() {  
    if (判断条件) {  
      this.$refs.upload.action = 'https://example.com/upload/image'; // JPG文件上传到不同的路径  
    } else {  
      this.$refs.upload.action = 'https://example.com/upload/other'; // 其他文件上传到不同的路径  
    }  
  },  
  handleAvatarSuccess() {  
    // 上传成功后的处理逻辑  
  }  
}

beforeAvatarUpload 方法会在每次上传文件之前被调用，然后根据文件类型和大小改变上传路径。其中 this.$refs.upload.action 改变了 Upload 组件的 action 属性，这样就可以根据不同的条件上传到不同的路径了

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除

upload