element ui 上传控件携带参数到后端-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui 上传控件携带参数到后端。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.携带固定参数：

element ui 上传控件携带参数到后端,ui,vue.js,javascript

2.携带不固定参数：

element ui 上传控件携带参数到后端,ui,vue.js,javascript

<el-row>
<el-col :span="24">
<el-upload
:multiple="false"
:show-file-list="false"
:on-success="f_handleImageSuccess"
:before-upload="f_HandleImageBefore"
drag
action=""
:http-request="f_handleUploadForm"
:auto-upload="true"
:headers="importHeaders"
>
<i class="el-icon-upload" style="margin:10px 0px 0px 0px;" />
<div class="el-upload__text">
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传xls/xlsx/et文件，且不超过200MB</div>
</div>
</el-upload>
</el-col>
</el-row>

element ui 上传控件携带参数到后端,ui,vue.js,javascript

// 文件格式及文件大小验证
f_HandleImageBefore(file) {
let isJPG = false;
if (file.name.indexOf('.xls') > -1 || file.name.indexOf('.xlsx') > -1 || file.name.indexOf('.et') > -1) { isJPG = true; }
let isLt2M = file.size / 1024 / 1024 < 200;
if (!isJPG) {
this.$message.error('上传文件只能是XLS/XLSX/ET格式!');
}
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 200MB!');
}
return isJPG && isLt2M;
},
f_handleImageSuccess(file) {
this.meternos = '';
if (file.success) {
this.$message({ showClose: true, message: '附件上传成功！', type: 'success' });
// this.$emit('queryList');
} else {
this.$message({ showClose: true, message: file.message, type: 'error' });
}
},
// 上传并携带参数
f_handleUploadForm(param)
{
let formData = new FormData()
// 在formData中加入我们需要的参数
formData.append('file', param.file) //上传的文件
formData.append('poid', this.fileUpload.poid) //参数:出库单号
formData.append('type', this.fileUpload.type) //参数:类型
api_StockOutOverdueUploadFile(formData).then((response) => {
if (response.success === true) {
this.$message({ showClose: true, message: '附件上传成功！', type: 'success' });
}
});
}

文章来源地址https://www.toymoban.com/news/detail-609365.html

js里面的请求方法：

//附件上传
export function api_StockOutOverdueUploadFile(data) {
return request({
url: '/maobao.mom.wms/v' + apiversion + '/purchaseorderdetail/StockOutOverdueUploadFile',
method: 'post',
data
});
}

element ui 上传控件携带参数到后端,ui,vue.js,javascript

[HttpPost, Route("StockOutOverdueUploadFile"), SwaggerFileUpload]
[DisableRequestSizeLimit]
public async Task<IActionResult> StockOutOverdueUploadFile()
{
//获取所有上传文件
var files = Request.Form.Files;// 接收上传文件
var poid = Request.Form["poid"].ToString();//接收传递的参数:出库单号
var type = Request.Form["type"].ToString();//接收传递的参数:类型
}

到了这里，关于element ui 上传控件携带参数到后端的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！