[[378125]]

 在Vue.js 中，如果網(wǎng)絡請求使用 axios ，并且使用了 ElementUI 庫，那么一般來說，文件上傳有兩種不同的實現(xiàn)方案：

1.  通過 Ajax 實現(xiàn)文件上傳
2.  通過 ElementUI 里邊的 Upload 組件實現(xiàn)文件上傳

兩種方案，各有優(yōu)缺點，我們分別來看。

準備工作

首先我們需要一點點準備工作，就是在后端提供一個文件上傳接口，這是一個普通的 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 給文件重命名。

這里為了簡化代碼，我省略掉了異常捕獲，上傳結果直接返回成功，后端代碼大伙可根據(jù)自己的實際情況自行修改。

Ajax 上傳

在 Vue 中，通過 Ajax 實現(xiàn)文件上傳，方案和傳統(tǒng) Ajax 實現(xiàn)文件上傳基本上是一致的，唯一不同的是查找元素的方式。 

<input type="file" ref="myfile">  
<el-button @click="importData" type="success" size="mini" icon="el-icon-upload2">導入數(shù)據(jù)</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 數(shù)組，里邊存放了所有選擇的 file，由于文件上傳時，文件可以多選，因此這里拿到的 files 對象是一個數(shù)組。
3.  從 files 對象中，獲取自己要上傳的文件，由于這里是單選，所以其實就是數(shù)組中的第一項。
4.  構造一個 FormData ，用來存放上傳的數(shù)據(jù),FormData 不可以像 Java 中的 StringBuffer 使用鏈式配置。
5.  構造好 FromData 后，就可以直接上傳數(shù)據(jù)了，F(xiàn)ormData 就是要上傳的數(shù)據(jù)。
6.  文件上傳注意兩點，1. 請求方法為 post，2. 設置 Content-Type 為  multipart/form-data 。

這種文件上傳方式，實際上就是傳統(tǒng)的 Ajax 上傳文件，和大家常見的 jQuery 中寫法不同的是，這里元素查找的方式不一樣（實際上元素查找也可以按照JavaScript 中原本的寫法來實現(xiàn)），其他寫法一模一樣。這種方式是一個通用的方式，和使用哪一種前端框架無關。最后再和大家來看下封裝的上傳方法： 

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

經(jīng)過這幾步的配置后，前端就算上傳完成了，可以進行文件上傳了。

使用 Upload 組件

如果使用 Upload ，則需要引入 ElementUI，所以一般建議，如果使用了 ElementUI 做 UI 控件的話，則可以考慮使用 Upload 組件來實現(xiàn)文件上傳，如果沒有使用 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.  上傳按鈕的點擊狀態(tài)和圖標都設置為變量 ，在文件上傳過程中，修改上傳按鈕的點擊狀態(tài)為不可點擊，同時修改圖標為一個正在加載的圖標 loading。
6.  上傳的文本也設為變量，默認上傳 button 的文本是 數(shù)據(jù)導入 ，當開始上傳后，將找個 button 上的文本修改為 正在導入。

相應的回調如下： 

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

1.  在文件開始上傳時，修改上傳按鈕為不可點擊，同時修改上傳按鈕的圖標和文本。
2.  文件上傳成功或者失敗時，修改上傳按鈕的狀態(tài)為可以點擊，同時恢復上傳按鈕的圖標和文本。

上傳效果圖如下：

總結

兩種上傳方式各有優(yōu)缺點：

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