Spring Boot+Vue+FastDFS 實現前後端分離文件上傳

  • 2020 年 3 月 10 日
  • 筆記

在 Spring Boot 前後端分離環境下做文件上傳，這個松哥之前在公眾號上發過一篇文章來和大家介紹，但是在之前的文章中，為了省事，文件我是直接保存在本地臨時目錄下的，這帶來了另外一個問題，就是項目重啟之後，臨時目錄失效，之前上傳的文件又訪問不到了。

很顯然在實際開發中我們不會這麼搞！在生產環境中，我們可以搭建獨立的文件伺服器，結合 FastDFS 還可以搭建獨立的分散式文件服務系統，這樣文件管理伺服器不僅方便管理還易於擴展，也解決了前面所說的臨時目錄失效的問題。

今天松哥想和大家聊一下在微人事中，我是如何通過 Spring Boot + Vue + FastDFS 來實現前後端分離文件上傳的。

學習本文需要大家先搞定 FastDFS，如果大家對於 FastDFS 還不太熟悉，可以先看看松哥之前發的教程：

  • 聽說你 FastDFS 老安裝失敗，這能忍？松哥一定要幫你搞定！

如果大家搞定了 FastDFS ，就直接來看今天的文件上傳吧：

服務端上傳介面：

Vue 上傳處理：

好了，不知道小夥伴們有沒有看懂呢？影片中的程式碼我已經提交到 GitHub 了：https://github.com/lenve/vhr。趕緊試一把！如果大家對松哥錄製的完整的微人事影片教程感興趣，可以戳這裡：Spring Boot + Vue 影片教程喜迎大結局，西交大的老師竟然都要來一套！

影片看完了，松哥再把理論也和大家捋一捋。

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

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

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

1.準備工作

首先我們需要一點點準備工作，就是在後端提供一個文件上傳介面，這是一個普通的 Spring Boot 項目，如下（視這裡來個簡單的服務端程式碼，影片中的程式碼大家可以從 GitHub 上獲取）：

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 給文件重命名。

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

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

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

3.使用 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. 文件上傳成功或者失敗時，修改上傳按鈕的狀態為可以點擊，同時恢復上傳按鈕的圖標和文本。

上傳效果圖如下：

4.總結

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

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

VirMach 便宜 VPS

QNews

QNews