Element el-upload 檔案上傳/圖檔上傳/拖拽上傳/附帶參數/附帶請求頭部詳解

1. 前言

本篇文章的标題，應該是我寫過的，關于Element元件介紹的文章裡面，最長的一個了。

無它，就是因為這個元件确實使用起來比較複雜，而且必須搭配上後端的講解，才能到位。

另外，我感覺對于el-upload上傳元件的介紹，官方文檔寫的有點亂，不知道是的确有點亂，還是官方水準太高我看不懂。

好了，本篇按我的思路來介紹下el-upload的用法。

2. 基本用法

2.1 前端部分

el-upload上傳元件的基本用法是非常簡單的，代碼如下：

 基本用法：<br><br>

   <el-upload :action="actionUrl">

     <el-button size="small" type="primary">點選上傳</el-button>

   </el-upload>

actionUrl: 'http://127.0.0.1:8080/upload',

1

隻需要解釋兩點，一是actionUrl表示檔案上傳對應的背景服務位址，二是el-upload标簽中間可以放置任何内容，點選中間的内容會觸發彈窗選擇檔案，選中檔案後會自動上傳到指定actionUrl。

上述代碼效果如下，實作起來非常簡單。

2.2 後端部分

後端部分實作起來也很簡單，接受一個檔案然後存儲即可，為了防止檔案重名，此處我還添加了重命名機制，使用UUID代替原來的檔案名進行存儲。

@RequestMapping("/upload")

public String upload(@RequestParam("file") MultipartFile file) {

 String filePath = "D:\\images\\";

 String fileName = file.getOriginalFilename();

 String fileType = fileName.substring(fileName.lastIndexOf("."), fileName.length());

 String fileNewName = UUID.randomUUID() + fileType;

 File targetFile = new File(filePath);

 if (!targetFile.exists()) {

  targetFile.mkdirs();

 }

 FileOutputStream out = null;

 try {

  out = new FileOutputStream(filePath + fileNewName);

  out.write(file.getBytes());

  out.flush();

  out.close();

 } catch (Exception e) {

  e.printStackTrace();

  return "";

 return fileNewName;

}

需要注意的是，後端傳回值是存儲的真實檔案名，最後我們在送出的時候，可以将業務資訊與真實檔案名一起送出存入資料庫，這樣就能把業務資訊和檔案對應起來了。

上傳成功後界面顯示如下，注意界面上顯示的是上傳檔案的原名，不是後端傳回的存儲檔案名。

2.3 擷取後端傳回資訊

有時候我們需要擷取後端傳回的檔案存儲名，以便将該檔案資訊存入資料庫。此時我們可以通過on-sucess綁定一個方法，該方法在上傳成功時調用，其參數中就有後端傳回資訊。

   <el-upload :action="actionUrl" :on-success="handleSuccess">

handleSuccess(response, file, fileList) {

     console.log(response, file, fileList);

   },

上傳成功後，response即為後端傳回值，另外file及fileList對象中也有後端傳回值資訊，感興趣的可以從控制台詳細檢視了解。

注意後端需要跨域，如果是Spring Boot項目的話，跨域代碼參考如下：

/**

* CORS跨域配置類

*/

@Configuration

public class CorsConfig {

private CorsConfiguration buildConfig() {

 CorsConfiguration corsConfiguration = new CorsConfiguration();

 corsConfiguration.addAllowedOrigin("*");

 corsConfiguration.addAllowedHeader("*");

 corsConfiguration.setAllowCredentials(true);

 corsConfiguration.addAllowedMethod("*");

 return corsConfiguration;

@Bean

public CorsFilter corsFilter() {

 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

 source.registerCorsConfiguration("/**", buildConfig());

 return new CorsFilter(source);

}

3. 外觀功能介紹

接下來，介紹與外觀相關的功能，el-upload可以通過修改參數，實作更好看的外觀效果。

3.1 拖拽上傳

通過設定drag屬性即可啟動拖拽上傳，極其簡單，當然控件中間的内容可以自定義，隻要好看就行。

 拖拽上傳：<br><br>

   <el-upload :action="actionUrl" drag>

     <i class="el-icon-upload"></i>

     <div class="el-upload__text">将檔案拖到此處，或<em>點選上傳</em></div>

效果如下：

3.2 顯示圖檔

可以顯示上傳的圖檔，在el-upload中添加img，然後上傳成功後設定圖檔内容即可。

顯示圖檔:<br><br>

   <el-upload :action="actionUrl" :limit="2" :on-success="handleSuccessWithImage">

     <img v-if="imageUrl" :src="imageUrl" class="my-image">

actionUrl: 'http://127.0.0.1:8080/upload',

   imageUrl: '',

handleSuccessWithImage(response, file, fileList) {

     this.imageUrl = URL.createObjectURL(file.raw);

3.3 設定檔案清單樣式

如果覺得上面顯示圖檔的方式不好看，沒關系，el-upload提供了顯示檔案清單的方式，美觀大方，而且使用很簡單。通過list-type屬性設定即可。(el-divider用于區分不同的示範内容，隻是為了友善觀看，跟本章内容沒關系。)

設定檔案清單樣式(text):<br><br>

   <el-upload :action="actionUrl" list-type="text">

   <el-divider></el-divider>

   設定檔案清單樣式(picture):<br><br>

   <el-upload :action="actionUrl" list-type="picture">

   設定檔案清單樣式(picture-card):<br><br>

   <el-upload :action="actionUrl" list-type="picture-card">

效果如下，可見後兩種效果還是很好看的。

3.4 顯示提示資訊

還可以在内部顯示一些詳細提示資訊：

顯示提示資訊：<br><br>

     <div slot="tip" class="el-upload__tip">上傳檔案大小不能超過500kb</div>

4. 事件功能介紹

上面介紹了el-upload的外觀部分，如果要實作一些複雜功能，還需要借助事件來實作。

4.1 限制上傳檔案數量

可以通過limit屬性設定檔案上傳的最大數量，同時通過on-exceed指定檔案超出數量限制時的鈎子方法。

限制上傳數量：<br><br>

   <el-upload :action="actionUrl" :limit="2" :on-exceed="handleExceed">

     <div slot="tip" class="el-upload__tip">上傳檔案大小不能超過500kb，最多隻能上傳2個檔案</div>

handleExceed(files, fileList) {

     console.log(files, fileList);

     this.$message.warning("最多隻能同時上傳2個檔案");

4.2 限制上傳檔案類型和大小

可以通過beforeUpload指定上傳檔案錢的鈎子方法，該方法傳回true則可以上傳，傳回false則終止上傳。是以可以在該方法中限制上傳檔案的類型和大小，代碼如下：

限制上傳類型和大小:<br><br>

   <el-upload :action="actionUrl" :before-upload="beforeUpload">

beforeUpload(file) {

     let sizeByMb = file.size / 1024 / 1024;

     if (sizeByMb > 2) {

       this.$message.warning("上傳檔案不能超過2M");

       return false;

     }

     if (file.type != 'image/jpeg') {

       this.$message.warning("隻能上傳圖檔");

     return true;

當上傳檔案大于2M或者不是圖檔時，會彈出消息提示，并取消檔案上傳動作。

4.3 移除檔案處理

當我們點選檔案清單的删除按鈕，移除檔案時，有時候我們會希望将該消息事件傳遞到後端，并告知後端要移除檔案的資訊，此時可以接住on-remove實作。

移除檔案處理：<br><br>

   <el-upload multiple :action="actionUrl" :on-remove="handleRemove">

 handleRemove(file, fileList) {

     console.log(file, fileList);

file中包含移除檔案的資訊，此時可以發起ajax請求到後端處理響應邏輯。

4.4 手動上傳

個别情況下，也會不希望選中檔案後立即上傳，而是先選擇檔案，再手工上傳。通過auto-upload屬性來實作：

手動上傳：<br><br>

   <el-upload ref="myUpload" multiple :action="actionUrl" :auto-upload="false">

     <el-button slot="trigger" size="small" type="primary">選取檔案</el-button>

     <el-button style="margin-left: 10px;" size="small" type="success" @click="btnUpload">上傳到伺服器</el-button>

btnUpload() {

     this.$refs.myUpload.submit();

5. 附帶參數

在上傳檔案時，例如上傳Excel表格。有時候我們希望同時附帶一些參數，例如Excel表格關聯的部門編号等。此時可以通過data屬性來指定。

附帶參數：<br><br>

   <el-upload :action="actionUrl2" :data="uploadData">

     actionUrl2: 'http://127.0.0.1:8080/uploadWithParam',

     uploadData: {

       userId: '001'

     },

後端同時接收檔案和參數：

@RequestMapping("/uploadWithParam")

public String uploadWithParam(@RequestParam("file") MultipartFile file, @RequestParam("userId") String userId) {

 System.out.println("userId:" + userId);

注意，可以再before-upload指定的鈎子方法中修改上傳的參數值。

6. 附帶請求頭部

在前後端分離的項目中，我們經常把驗證資訊放入headers頭部，然後由前端傳遞到後端，此時可以接住headers屬性實作。

附帶請求頭部：<br><br>

   <el-upload :action="actionUrl2" :data="uploadData" :headers="uploadHeaders">

  actionUrl2: 'http://127.0.0.1:8080/uploadWithParam',

     uploadHeaders: {

       token: '123456'

後端SpringBoot程式可以通過攔截器接收，配置攔截器代碼如下：

* Web配置類

public class WebConfig implements WebMvcConfigurer {

@Autowired

private MyInterceptor myInterceptor;

/**

 * 添加Web項目的攔截器

 */

@Override

public void addInterceptors(InterceptorRegistry registry) {

 // 對所有通路路徑，都通過MyInterceptor類型的攔截器進行攔截

 registry.addInterceptor(myInterceptor).addPathPatterns("/**");

攔截器代碼如下：

* 自定義攔截器類

@Component

public class MyInterceptor implements HandlerInterceptor {// 實作HandlerInterceptor接口

 * 通路控制器方法前執行

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

 String token = request.getHeader("token");

 System.out.println("token:" + token);

 return true;

7. 小結

el-upload上傳元件功能比較全面，使用起來也比較複雜，本篇給出了相對完整的介紹，大家可以參考實作。