ElementUI 文件上传传递额外参数

需求是在一个表格数据里面做文件上传按钮，需要在文件上传的时候传递当前行的主键id。el-upload组件默认提供的函数都没能实现这个功能，于是对函数的写法稍加更改以实现传递额外参数的功能。

HTML部分：

<el-upload<!-- 禁止自动上传，所以不在这里填写上传地址 -->:action="''"<!-- 设置文件样式按钮的样式和其他按钮一行显示 -->style="display: inline-block"<!-- 修改文件状态改变时的钩子写法，实现多传递一个额外参数功能 -->:on-change="(file, fileList) => { return fileChange(file, fileList, scope.row.id)}":file-list="fileList"<!-- 禁用自动上传 -->:auto-upload="false":show-file-list="false"><el-button size="mini" type="text">上传</el-button>
</el-upload>

JavaScript部分：

fileChange(file, fileList, id) {this.fileList = fileList.slice(-3);this.handleUpload(file, fileList, id)
},
handleUpload(file, fileList, id) {let data = new FormData()data.append('file', file.raw)upload(data, id).then(response => {console.log('上传结果：', response)})
}

ElementUI 文件上传传递额外参数相关推荐

html文件上传添加额外参数,bootstrap-fileinput组件在上传时传递额外参数
解决方法关键的配置参数是uploadExtraData 具体的代码如下: //获得额外参数的方法 fodderType = function() { return $("#fodderTy ...
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交)
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交) ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不 ...
elementui中同时上传多个文件_2019-12-19 element-ui文件上传一次请求上传多个文件...
最近在做项目的时候有一个需求,需要导入word文档,并且需要支持多选.element-ui 的 upload 组件支持多选文件,只需要配置参数 multiple 为 true 即可.但是这个组件默认会 ...
SpringMVC文件上传功能MultipartFile参数为空
最近简单实现了一个springmvc文件上传功能,点了上传按钮一直报空指针,问题解决了mark一下留作以后查阅,如有搜到这篇文章的仅供参考,先上主要代码.springmvc.xml配置如下: < ...
ajax实现文件上传，多文件上传，追加参数
1.html部分实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
PHP文件上传接口(带参数)
简单讲解下PHP服务端接受客户端上传的文件客户端上传文件到服务器,带参数,并且进行用户验证,方法很简单直接贴代码 <?php//强制显示错误error_reporting(E_ALL);// ...
C#文件上传同时附带参数上传
使用下面的方法就可以在上传文件的同时附带请求参数传递.方法内的部分请求参数可能需要修改. /// <summary>/// 文件上传/// </summary>/// < ...
vue+axios+el-upload实现文件上传（带参数）：
本次使用http-request自定义文件上传: <el-upload class="upload-demo" action="string" :http ...
关于element upload上传时额外参数的问题
笔者在用上传模块时存在一个问题,每次带的额外参数在第一次时都为空.因为涉及额外参数所以笔者用的是手动上传. <el-uploadclass="upload-demo"ref= ...

ElementUI 文件上传传递额外参数

ElementUI 文件上传传递额外参数相关推荐

最新文章

热门文章