Spring Boot + Vue 先後端分離，兩種文件上傳方式總結

在Vue.js 中，若是網絡請求使用 axios ，而且使用了 ElementUI 庫，那麼通常來講，文件上傳有兩種不一樣的實現方案：

1. 經過 Ajax 實現文件上傳
2. 經過 ElementUI 裏邊的 Upload 組件實現文件上傳

兩種方案，各有優缺點，咱們分別來看。

準備工做

首先咱們須要一點點準備工做，就是在後端提供一個文件上傳接口，這是一個普通的 Spring Boot 項目，以下：

SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
@PostMapping("/import")
public RespBean importData(MultipartFile file, HttpServletRequest req) throws IOException {
    String format = sdf.format(new Date());
    String realPath = req.getServletContext().getRealPath("/upload") + format;
    File folder = new File(realPath);
    if (!folder.exists()) {
        folder.mkdirs();
    }
    String oldName = file.getOriginalFilename();
    String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
    file.transferTo(new File(folder,newName));
    String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/upload" + format + newName;
    System.out.println(url);
    return RespBean.ok("上傳成功!");
}
複製代碼

這裏的文件上傳比較簡單，上傳的文件按照日期進行歸類，使用 UUID 給文件重命名。

這裏爲了簡化代碼，我省略掉了異常捕獲，上傳結果直接返回成功，後端代碼大夥可根據本身的實際狀況自行修改。

Ajax 上傳

在 Vue 中，經過 Ajax 實現文件上傳，方案和傳統 Ajax 實現文件上傳基本上是一致的，惟一不一樣的是查找元素的方式。

<input type="file" ref="myfile">
<el-button @click="importData" type="success" size="mini" icon="el-icon-upload2">導入數據</el-button>
複製代碼

在這裏，首先提供一個文件導入 input 組件，再來一個導入按鈕，在導入按鈕的事件中來完成導入的邏輯。

importData() {
  let myfile = this.$refs.myfile;
  let files = myfile.files;
  let file = files[0];
  var formData = new FormData();
  formData.append("file", file);
  this.uploadFileRequest("/system/basic/jl/import",formData).then(resp=>{
    if (resp) {
      console.log(resp);
    }
  })
}
複製代碼

關於這段上傳核心邏輯，解釋以下：

1. 首先利用 Vue 中的 $refs 查找到存放文件的元素。
2. type 爲 file 的 input 元素內部有一個 files 數組，裏邊存放了全部選擇的 file，因爲文件上傳時，文件能夠多選，所以這裏拿到的 files 對象是一個數組。
3. 從 files 對象中，獲取本身要上傳的文件，因爲這裏是單選，因此其實就是數組中的第一項。
4. 構造一個 FormData ，用來存放上傳的數據,FormData 不能夠像 Java 中的 StringBuffer 使用鏈式配置。
5. 構造好 FromData 後，就能夠直接上傳數據了，FormData 就是要上傳的數據。
6. 文件上傳注意兩點，1. 請求方法爲 post，2. 設置 Content-Type 爲 multipart/form-data 。

這種文件上傳方式，實際上就是傳統的 Ajax 上傳文件，和你們常見的 jQuery 中寫法不一樣的是，這裏元素查找的方式不同（實際上元素查找也能夠按照JavaScript 中本來的寫法來實現），其餘寫法如出一轍。這種方式是一個通用的方式，和使用哪種前端框架無關。最後再和你們來看下封裝的上傳方法：

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

通過這幾步的配置後，前端就算上傳完成了，能夠進行文件上傳了。

使用 Upload 組件

若是使用 Upload ，則須要引入 ElementUI，因此通常建議，若是使用了 ElementUI 作 UI 控件的話，則能夠考慮使用 Upload 組件來實現文件上傳，若是沒有使用 ElementUI 的話，則不建議使用 Upload 組件，至於其餘的 UI 控件，各自都有本身的文件上傳組件，具體使用能夠參考各自文檔。

<el-upload style="display: inline" :show-file-list="false" :on-success="onSuccess" :on-error="onError" :before-upload="beforeUpload" action="/system/basic/jl/import">
  <el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>
</el-upload>
複製代碼

1. show-file-list 表示是否展現上傳文件列表，默認爲true，這裏設置爲不展現。
2. before-upload 表示上傳以前的回調，能夠在該方法中，作一些準備工做，例如展現一個進度條給用戶 。
3. on-success 和 on-error 分別表示上傳成功和失敗時候的回調，能夠在這兩個方法中，給用戶一個相應的提示，若是有進度條，還須要在這兩個方法中關閉進度條。
4. action 指文件上傳地址。
5. 上傳按鈕的點擊狀態和圖標都設置爲變量 ，在文件上傳過程當中，修改上傳按鈕的點擊狀態爲不可點擊，同時修改圖標爲一個正在加載的圖標 loading。
6. 上傳的文本也設爲變量，默認上傳 button 的文本是 數據導入 ，當開始上傳後，將找個 button 上的文本修改成 正在導入。

相應的回調以下：

onSuccess(response, file, fileList) {
  this.enabledUploadBtn = true;
  this.uploadBtnIcon = 'el-icon-upload2';
  this.btnText = '數據導入';
},
onError(err, file, fileList) {
  this.enabledUploadBtn = true;
  this.uploadBtnIcon = 'el-icon-upload2';
  this.btnText = '數據導入';
},
beforeUpload(file) {
  this.enabledUploadBtn = false;
  this.uploadBtnIcon = 'el-icon-loading';
  this.btnText = '正在導入';
}
複製代碼

1. 在文件開始上傳時，修改上傳按鈕爲不可點擊，同時修改上傳按鈕的圖標和文本。
2. 文件上傳成功或者失敗時，修改上傳按鈕的狀態爲能夠點擊，同時恢復上傳按鈕的圖標和文本。

上傳效果圖以下：

總結

兩種上傳方式各有優缺點：

1. 第一種方式最大的優點是通用，一招鮮吃遍天，到哪裏都能用，可是對於上傳過程的監控，進度條的展現等等邏輯都須要本身來實現。
2. 第二種方式不夠通用，由於它是 ElementUI 中的組件，得引入 ElementUI 才能使用，不過這種方式很明顯有需多比較方便的回調，能夠實現很是方便的處理常見的各類上傳問題。
3. 常規的上傳需求第二種方式能夠知足，可是若是要對上傳的方法進行定製，則仍是建議使用第一種上傳方案。

關注公衆號【江南一點雨】，專一於 Spring Boot+微服務以及先後端分離等全棧技術，按期視頻教程分享，關注後回覆 Java ，領取鬆哥爲你精心準備的 Java 乾貨！