1. 程式人生 > 其它 >element ui 上傳控制元件攜帶引數到後端

element ui 上傳控制元件攜帶引數到後端

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();//接收傳遞的引數:型別
        }