Spring Boot+Vue 檔案上傳，如何攜帶令牌資訊？

@[toc]
關於檔案上傳這塊，鬆哥之前也寫了好幾篇文章了，甚至還有視訊：

• Spring Boot+Vue+FastDFS 實現前後端分離檔案上傳

但是，之前和小夥伴們提到的方案，是基於 session 來做認證的，所以並不需要考慮攜帶令牌的問題，但是在前後端分離開發中，我們可能採用 JWT 或者是 OAuth2+JWT 的方式來做認證，如果是這樣的話，那我們就要手動傳遞令牌了。

今天就來和大家說說手動傳遞令牌的事。

1.傳統方案

我們先來看看，基於 session 認證，檔案上傳要怎麼做。

在 Vue.js 中，如果網路請求使用 axios ，並且使用了 ElementUI 庫，那麼一般來說，檔案上傳有兩種不同的實現方案：

1. 通過 Ajax 實現檔案上傳
2. 通過 ElementUI 裡邊的 Upload 元件實現檔案上傳

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

1.1 準備工作

首先我們需要一點點準備工作，就是在後端提供一個檔案上傳介面，這是一個普通的 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 給檔案重新命名。

這裡為了簡化程式碼，我省略掉了異常捕獲，上傳結果直接返回成功，後端程式碼大夥可根據自己的實際情況自行修改。

這是為了方便，我直接將檔案儲存到本地，小夥伴們也可以結合 FastDFS 將檔案上傳做的更加專業一些，可以參考鬆哥這篇文章：Spring Boot+Vue+FastDFS 實現前後端分離檔案上傳。

1.2 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'
    }
  });
}

經過這幾步的配置後，前端就算上傳完成了，可以進行檔案上傳了。

1.3 使用 el-upload 元件

如果使用 el-upload ，則需要引入 ElementUI，所以一般建議，如果使用了 ElementUI 做 UI 控制元件的話，則可以考慮使用 el-upload 元件來實現檔案上傳，如果沒有使用 ElementUI 的話，則不建議使用 el-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. 檔案上傳成功或者失敗時，修改上傳按鈕的狀態為可以點選，同時恢復上傳按鈕的圖示和文字。

上傳效果圖如下：

使用 el-upload 做檔案上傳，鬆哥之前也錄過一個視訊，小夥伴們可以參考(本視訊節選自鬆哥自制的 Spring Boot+Vue+微人事系列視訊教程)：

<!--視訊位置-->

1.4 兩種方式比較

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

1. 第一種方式最大的優勢是通用，一招鮮吃遍天，到哪裡都能用，但是對於上傳過程的監控，進度條的展示等等邏輯都需要自己來實現。
2. 第二種方式不夠通用，因為它是 ElementUI 中的元件，得引入 ElementUI 才能使用，不過這種方式很明顯有需多比較方便的回撥，可以實現非常方便的處理常見的各種上傳問題。
3. 常規的上傳需求第二種方式可以滿足，但是如果要對上傳的方法進行定製，則還是建議使用第一種上傳方案。

2.手動傳遞令牌

對於上面不同的檔案上傳方式，手動上傳令牌也有不同的方案，鬆哥來和大家挨個介紹。我這裡服務端認證是 OAuth2+JWT 的方式，所以接下來令牌傳遞主要是按照 OAuth2 的格式來傳遞令牌，其實都是修改請求頭，只要這種方式會了，其他方式也就會了。

關於 OAuth2，如果小夥伴們還不熟悉，可以看看鬆哥之前寫的系列教程：OAuth2系列

2.1 Ajax 傳遞令牌

Ajax 傳遞令牌實際上是非常容易的，我們只需要稍微修改請求頭即可。我給大家舉一個簡單例子。

如果你用的 axios 來做網路請求，那麼按照如下方式新增請求頭即可（或者在請求攔截器中統一新增）：

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

如果你用了 jQuery 的話，那麼按照如下方式新增請求頭即可：

$("#btnClick").click(function () {
        var formData = new FormData();
        formData.append("file", $("#userface")[0].files[0]);
        $.ajax({
            url: '/fileupload',
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token
            },
            data: formData,
            processData: false,
            contentType: false,
            success: function (msg) {
                alert(msg);
            }
        });
    });

無非就是修改請求頭，只要是自己傳送請求的，請求頭都是可以自由定製的，無論你用 jQuery 還是 axios 還是原生的 XMLHttpRequest。

2.2 el-upload 處理令牌

如果使用了 el-upload，我們就得在人家框架裡邊玩了，得符合框架要求，這雖然多了一些掣肘，但是也不是不能實現，鬆哥這裡和大家介紹兩種方案。

2.2.1 方案一

方案一是我目前採用的方案，因為 el-upload 支援定製請求頭，這就好辦了：

<el-upload
  ref="upload"
  class="upload-container"
  :data="category"
  :multiple="false"
  :limit="1"
  :headers="myHeaders"
  :auto-upload="false"
  :on-success="onSuccess"
  :on-error="onError"
  :file-list="fileList"
  action="/appmanager/app/categories/"
>
  <el-button size="mini" type="primary">選擇圖示</el-button>
</el-upload>

其中，:headers="myHeaders" 就是我定製的請求頭，然後在 data 中定義該變數即可：

data() {
  return {
    myHeaders: { Authorization: 'Bearer ' + getToken() }
  }
},

2.2.2 方案二

方案二則是利用 el-upload 的 before-upload 鉤子函式，開發者可以在這個鉤子函式中自己手動上傳，上傳完成之後，返回一個 false，這時 el-upload 就會停止它自己的上傳邏輯。這種方式我看到有別的小夥伴在用，所以給大家一個簡單的案例參考下：

<el-upload action="http://www.javaboy.org" :before-upload="beforeUpload"></el-upload>
beforeUpload (file) {
    //參考上面的 ajax 或者 axios 上傳檔案
    return false
}

這裡有幾個細節大家需要注意下：

1. el-upload 的 action 屬性隨意給一個值，使之不報錯，因為真正的上傳地址我們將在 beforeUpload 方法中給出。
2. beforeUpload 方法的上傳邏輯跟我們第一小節介紹的一致，我就不重複寫了，注意上傳的檔案物件是 file.raw。
3. beforeUpload 方法最終返回 false，終止 el-upload 自己的上傳邏輯。

3.小結

好了，和小夥伴們介紹了幾種檔案上傳時候的令牌傳遞方式，不知道大家有沒有 GET 到呢？有問題歡迎留言討論，如果學到了，記得點個在看鼓勵下鬆哥哦～