element ui 上传控件携带参数到后端

1.携带固定参数:

element ui 上传控件携带参数到后端_第1张图片

2.携带不固定参数: 

element ui 上传控件携带参数到后端_第2张图片

        
       
                      :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"
          >
           
           


             
将文件拖到此处,或点击上传

             
只能上传xls/xlsx/et文件,且不超过200MB

           

         
         
     

element ui 上传控件携带参数到后端_第3张图片

 // 文件格式及文件大小验证
    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
      });
    }
     

 

element ui 上传控件携带参数到后端_第4张图片

 

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

 

你可能感兴趣的:(ui,vue.js,javascript)