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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章