在Vue.js 中，如果網路請求使用 axios ，並且使用了 ElementUI 庫，那麼一般來說，檔案上傳有兩種不同的實現方案：
- 通過 Ajax 實現檔案上傳
- 通過 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);
}
})
}
複製程式碼關於這段上傳核心邏輯，解釋如下：
- 首先利用 Vue 中的 $refs 查詢到存放檔案的元素。
- type 為 file 的 input 元素內部有一個 files 陣列，裡邊存放了所有選擇的 file，由於檔案上傳時，檔案可以多選，因此這裡拿到的 files 物件是一個陣列。
- 從 files 物件中，獲取自己要上傳的檔案，由於這裡是單選，所以其實就是陣列中的第一項。
- 構造一個 FormData ，用來存放上傳的資料,FormData 不可以像 Java 中的 StringBuffer 使用鏈式配置。
- 構造好 FromData 後，就可以直接上傳資料了，FormData 就是要上傳的資料。
- 檔案上傳注意兩點，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>
複製程式碼- show-file-list 表示是否展示上傳檔案列表，預設為true，這裡設定為不展示。
- before-upload 表示上傳之前的回撥，可以在該方法中，做一些準備工作，例如展示一個進度條給使用者 。
- on-success 和 on-error 分別表示上傳成功和失敗時候的回撥，可以在這兩個方法中，給使用者一個相應的提示，如果有進度條，還需要在這兩個方法中關閉進度條。
- action 指檔案上傳地址。
- 上傳按鈕的點選狀態和圖示都設定為變數 ，在檔案上傳過程中，修改上傳按鈕的點選狀態為不可點選，同時修改圖示為一個正在載入的圖示 loading。
- 上傳的文字也設為變數，預設上傳 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 = '正在匯入';
}
複製程式碼- 在檔案開始上傳時，修改上傳按鈕為不可點選，同時修改上傳按鈕的圖示和文字。
- 檔案上傳成功或者失敗時，修改上傳按鈕的狀態為可以點選，同時恢復上傳按鈕的圖示和文字。
上傳效果圖如下：
總結
兩種上傳方式各有優缺點：
- 第一種方式最大的優勢是通用，一招鮮吃遍天，到哪裡都能用，但是對於上傳過程的監控，進度條的展示等等邏輯都需要自己來實現。
- 第二種方式不夠通用，因為它是 ElementUI 中的元件，得引入 ElementUI 才能使用，不過這種方式很明顯有需多比較方便的回撥，可以實現非常方便的處理常見的各種上傳問題。
- 常規的上傳需求第二種方式可以滿足，但是如果要對上傳的方法進行定製，則還是建議使用第一種上傳方案。
關注公眾號牧碼小子，專注於 Spring Boot+微服務，定期視訊教程分享，關注後回覆 Java ，領取鬆哥為你精心準備的 Java 乾貨！
