element ui 上傳控制元件攜帶引數到後端
阿新 • • 發佈:2022-05-16
1.攜帶固定引數:
2.攜帶不固定引數:
<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>
// 檔案格式及檔案大小驗證 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' }); } }); }
- js裡面的請求方法:
//附件上傳
export function api_StockOutOverdueUploadFile(data) {
return request({
url: '/maobao.mom.wms/v' + apiversion + '/purchaseorderdetail/StockOutOverdueUploadFile',
method: 'post',
data
});
}
部分程式碼如下:
[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();//接收傳遞的引數:型別 }
- 參考:(1)自定義elementui上傳檔案以及攜帶引數 https://blog.csdn.net/dupeng0811/article/details/89877527
(2)Request.Form的用法 https://blog.csdn.net/dupeng0811/article/details/89877527