1. el-upload组件
使用 :http-request 自定义上传方法，action仍然要有，随便起个名字即可，
注意使用 :http-request 之后， :on-success, :on-error 指令是不会触发的
自定义上传 函数为 uploadFile
<el-upload
:show-file-list="false"
class="upload-demo"
action="fakeaction"
:limit="1"
accept=".csv"
:http-request="uploadFile">
<el-button size="small" type="primary" @click="bindId(scope.row.id)">上传计算文件</el-button>
</el-upload>2. 封装上传方法（定义传输请求头,传输格式）
// 在api.js中编写上传方法，并导出
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}在main.js中将封装好的方法加入全局，后面可直接调用
import {uploadFileRequest} from './utils/api'
Vue.prototype.uploadFileRequest = uploadFileRequest;3. 在uploadFile函数中，直接调用uploadFileRequest
uploadFile(params){
const file = params.file;
// 使用FormData传参数和文件
var form = new FormData();
// 文件
form.append("file", file);
// 参数
form.append("id", this.urlId);
// 调用封装好的上传方法，传给后台FormData
this.uploadFileRequest("/forecast/arj/upload",form).then(resp=>{
if(resp && resp.status == 200){
this.$message("成功了");
}
})
},4. 后台获取参数
正常获取即可，方法内容就不写了。文章来源：https://www.toymoban.com/news/detail-505915.html
@PostMapping("/arj/upload")
public RespBean upload(@RequestParam MultipartFile file,int id){
}点个赞再走，感谢！文章来源地址https://www.toymoban.com/news/detail-505915.html
到了这里，关于el-upload实现自定义携带参数上传文件（ :http-request 方式）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
