ElementUI中el-upload怎樣上傳文件並且傳遞額外參數給Springboot后台進行接收

場景

需要將Excel中的數據導入到數據庫中，就會用到文件上傳的功能。

這里使用ElementUI的el-upload控件實現文件上傳。

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先在頁面上添加一個el-upload控件

      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        :data="{updateSupport:upload.updateSupport,lxyf:upload.lxyf}"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          將文件拖到此處，或
          <em>點擊上傳</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport" />是否更新已經存在的數據
          <el-link
            type="info"
            style="font-size:12px"
            @click="downloadTemplate('lxszTemplate.xlsx')"
          >下載模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：僅允許導入“xls”或“xlsx”格式文件！</div>
      </el-upload>

然后設置它的一些屬性

limit設置只能單選一個文件，默認是多選。

accept設置可接受選擇的文件類型。

headers設置上傳的請求頭

action設置上傳的地址

disabled設置什么時候禁用。

on-progress文件上傳時的鈎子

on-success文件上傳成功的鈎子

auto-upload設置是否自動提交

data設置傳遞的參數

這里一些參數封裝進了一個upload對象，需要聲明對象並設置對象的一些值。

     // 導入參數
      upload: {
        // 是否顯示
        open: false,
        // 彈出層標題
        title: "",
        // 是否禁用上傳
        isUploading: false,
        // 是否更新已經存在的數據
        updateSupport: 0,
        // 設置上傳的請求頭部
        headers: { Authorization: "Bearer " + getToken() },
        // 上傳的地址
        url: process.env.VUE_APP_BASE_API + "/kqgl/lxsz/importData",
      },

其中設置上傳的請求頭時的getToken是獲取令牌跳過登錄驗證的方法

它來自於下面的js

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

然后設置上傳地址中process.env.VUE_APP_BASE_API 是在全局的precess中獲取在vue.config.js中配置的接口代碼的地址

    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

這里是我本地的8080端口

然后加上SpringBoot后台配置的Url。

上面還設置了文件上傳中的處理鈎子函數和上傳成功的鈎子函數

    // 文件上傳中處理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上傳成功處理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "導入結果", { dangerouslyUseHTMLString: true });
      this.getList();
    },

在上傳中時將此控件設置為禁用，上傳成功后將此對話框關閉，將上傳控件啟用，清理選擇的文件，提示導入結果，刷新數據列表。

如果不加data進行傳遞的額外的參數時，默認會向后台傳遞一個名字為file的文件

在Springboot中使用

@RequestParam MultipartFile file

接受即可。如果想要傳遞額外的參數，就使用上面的格式去傳遞即可。

 :data="{updateSupport:upload.updateSupport,lxyf:upload.lxyf}"

選擇好文件后沒有自動進行提交，設置的是手動提交，在確定按鈕的點擊事件中

    submitFileForm() {
      this.$refs.upload.submit();
    },

將其進行提交，其中el-upload設置的ref="upload"就可以在這里進行提交。

然后在action對應的后台Springboot接口方法中

    @RequestMapping("/importData")
    @ResponseBody
    public AjaxResult importData(@RequestParam MultipartFile file, @RequestParam boolean updateSupport,@RequestParam String lxyf) throws Exception {

    }

使用 @RequestMapping注解，參數使用@RequestParam 進行接收

這里除了第一個文件參數，后面的兩個都是額外傳遞的參數。

這樣在后台中就能接收到參數了