1. el-upload組件

使用 :http-request 自定義上傳方法，action仍然要有，隨便起個名字即可，

注意使用 :http-request 之后， :on-success, :on-error 指令是不會觸發(fā)的

自定義上傳 函數(shù)為??uploadFile

                <el-upload
                  :show-file-list="false"
                  class="upload-demo"
                  action="fakeaction"
                  :limit="1"
                  accept=".csv"
                  :http-request="uploadFile">
        <el-button size="small" type="primary" @click="bindId(scope.row.id)">上傳計算文件</el-button>
                </el-upload>

2. 封裝上傳方法（定義傳輸請求頭,傳輸格式）

// 在api.js中編寫上傳方法，并導(dǎo)出

export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

在main.js中將封裝好的方法加入全局，后面可直接調(diào)用

import {uploadFileRequest} from './utils/api'


???????Vue.prototype.uploadFileRequest = uploadFileRequest;

3. 在uploadFile函數(shù)中，直接調(diào)用uploadFileRequest

uploadFile(params){
        const file = params.file;
        // 使用FormData傳參數(shù)和文件
        var form = new FormData();
        // 文件
        form.append("file", file);
        // 參數(shù)
        form.append("id", this.urlId);
        // 調(diào)用封裝好的上傳方法，傳給后臺FormData
        this.uploadFileRequest("/forecast/arj/upload",form).then(resp=>{
          if(resp && resp.status == 200){
            this.$message("成功了");
          }
        })
      },

4. 后臺獲取參數(shù)? ??

正常獲取即可，方法內(nèi)容就不寫了。

    @PostMapping("/arj/upload")
    public RespBean upload(@RequestParam MultipartFile file,int id){  
  
    }

點個贊再走，感謝！文章來源地址http://www.zghlxwxcb.cn/news/detail-505915.html

到了這里，關(guān)于el-upload實現(xiàn)自定義攜帶參數(shù)上傳文件（ :http-request 方式）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！