在 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 属性,这样就可以根据不同的条件上传到不同的路径了