Vue實現多文件上傳功能(前端 + 後端代碼)

本人業餘前端開發，因爲公司(很坑)覺得我很牛逼，所以讓我前後端一起玩，無奈的我只能磕磕碰碰的研究起了vue。

開發項目的時候，用到文件上傳的功能很常見，包括單文件上傳和多文件上傳，上傳各種類型的文件。在vue裏面要實現多文件上傳功能，還是很方便的。

本文就一起來學習一下，如何把多文件上傳功能封裝成一個組件，後面需要使用的時候，直接兩三行代碼就能搞定。

1、前端代碼

首先我們先看前端，如何把它封裝成一個組件。我們在調用它的時候，可能需要從外部傳入一些參數給它，所以我們需要定義一些傳入參數。這些參數我們可以放到props裏面

export default {
  props: {
    // 值
    value: [String, Object, Array],
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 2,
    },
    // 文件類型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => [".jpg", ".jpeg", ".png", ".doc", ".xls", ".xlsx", ".ppt", ".txt", ".pdf"],
    },
    // 是否顯示提示
    isShowTip: {
      type: Boolean,
      default: true
    },
    // 單據id
    billId: {
      type: Number,
      require: true
    },
    // 單據類型
    billType: {
      type: Number,
      required: true
    }
  }
}

上面定義了一些文件大小，文件類型等，如果沒有傳入，則爲默認值。單據類型和單據id是必須要傳入的，這裏可以依照實際開發需要進行定義即可。

文件上傳組件，我們可以使用element的el-upload，在頁面引入，我們點擊後一般喚醒的是一個文件上傳彈窗，可以使用el-dialog標籤包圍。完整代碼如下

<template>
  <el-dialog title="附件上傳" :visible.sync="visible" width="800px" :close-on-click-modal="false" @close="cancel">
    <div class="upload-file">
      <el-upload
        :action="action"
        :before-upload="handleBeforeUpload"
        :file-list="fileList"
        :limit="3"
        multiple
        :accept="accept"
        :on-error="handleUploadError"
        :on-exceed="handleExceed"
        :on-success="handleUploadSuccess"
        :on-change="handChange"
        :http-request="httpRequest"
        :show-file-list="true"
        :auto-upload="false"
        class="upload-file-uploader"
        ref="upload"
      >
        <!-- 上傳按鈕 -->
        <el-button slot="trigger" size="mini" type="primary">選取文件</el-button>
        <el-button style="margin-left: 10px;" :disabled="fileList.length < 1" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
        <!-- 上傳提示 -->
        <div class="el-upload__tip" slot="tip" v-if="showTip">
          請上傳
          <template v-if="fileSize"> 大小不超過 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
          <template v-if="fileType"> 格式爲 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
          的文件
        </div>
      </el-upload>

      <!-- 文件列表 -->
      <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
        <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
          <el-link :href="file.url" :underline="false" target="_blank">
            <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
          </el-link>
          <div class="ele-upload-list__item-content-action">
            <el-link :underline="false" @click="handleDelete(index)" type="danger">刪除</el-link>
          </div>
        </li>
      </transition-group>
    </div>
  </el-dialog>
</template>

上面用到的幾個變量，我們需要在data裏面定義

data() {
    return {
      // 已選擇文件列表
      fileList: [],
      // 是否顯示文件上傳彈窗
      visible: false,
      // 可上傳的文件類型
      accept: '',
      action: 'action'
    };
  },

accept字段需要在頁面創建後，通過傳入或默認的fileType字段進行拼接得到

created() {
    this.fileList = this.list
    // 拼接
    this.fileType.forEach(el => {
      this.accept += el
      this.accept += ','
    })
    this.fileType.slice(0, this.fileList.length - 2)
  },

接下來就是文件上傳相關的方法，這裏我們使用選擇文件後手動上傳的方式，請看下面的代碼

<el-upload
        :action="action"  // 手動上傳，這個參數沒有用，但因爲是必填的，所以隨便填一個值就行
        :before-upload="handleBeforeUpload"  // 文件上傳之前進行的操作
        :file-list="fileList"   // 已選擇文件列表
        :limit="3"   // 一次最多上傳幾個文件
        multiple   // 可以多選
        :accept="accept"   // 可以上傳的文件類型
        :on-error="handleUploadError"   // 上傳出錯時調用
        :on-exceed="handleExceed"   // 文件數量超過限制時調用
        :on-success="handleUploadSuccess"   // 上傳成功時調用
        :on-change="handChange"   // 文件發生變化時調用
        :http-request="httpRequest"   // 自定義的文件上傳方法，我們手動點擊上傳按鈕後會調用
        :show-file-list="true"   // 是否顯示文件列表
        :auto-upload="false"   // 關閉自動上傳
        class="upload-file-uploader" 
        ref="upload"
      >

<!-- 上傳按鈕 -->
<el-button slot="trigger" size="mini" type="primary">選取文件</el-button>
<el-button style="margin-left: 10px;" :disabled="fileList.length < 1" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>

點擊上傳到服務器後，就觸發submitUpload調用我們自定義的方法。

注意這裏選取文件的按鈕需要加上slot="trigger"屬性，不然點擊上傳到服務器按鈕後，也會觸發選擇文件彈框。

接下來看相關的方法

methods: {
    // 外部調用這個方法，顯示文件上傳彈窗
    show() {
      this.visible = true
    },
    // 上傳前校檢格式和大小
    handleBeforeUpload(file) {
      // 校檢文件類型
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf("."));
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$message.error(`文件格式不正確, 請上傳${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      // 校檢文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上傳文件大小不能超過 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    // 文件個數超出
    handleExceed() {
      this.$message.error(`只允許上傳3個文件`);
    },
    // 上傳失敗
    handleUploadError(err) {
      this.$message.error("上傳失敗, 請重試");
    },
    // 上傳成功回調
    handleUploadSuccess(res, file) {
      this.$message.success("上傳成功");
      this.cancel()
    },
    /** 文件狀態改變時調用 */
    handChange(file, fileList) {
      this.fileList = fileList
    },
    // 刪除文件
    handleDelete(index) {
      this.fileList.splice(index, 1);
    },
    // 獲取文件名稱
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
      } else {
        return "";
      }
    },
    /** 手動提交上傳 */
    submitUpload() {
      if (this.fileList.length <= 0) {
        return false
      }
      this.$refs.upload.submit()
    },
    /** 關閉上傳彈框 */
    cancel() {
      this.fileList = []
      this.visible = false
    },
    /** 調用接口上傳 */
    httpRequest(param) {
      const formData = new FormData()
      formData.append("billId", this.billId)
      formData.append("formType", this.billType)
      formData.append('file', param.file)
      uploadFormFile(formData).then(res => {
        if(res.code === 200){
          // 自定義上傳時，需自己執行成功回調函數
          param.onSuccess()
          this.$refs.upload.clearFiles()
          this.msgSuccess("上傳成功")
          // 回調方法，文件上傳成功後，會調用`input`指定的方法，在調用方定義
          this.$emit("input", res.data)
        }
      }).catch((err)=>{})
    }
  }

其他方法都還好，主要看看這個httpRequest方法，如果直接使用url的方式進行調用，會出現跨域問題，你需要把token放到請求頭裏。我這裏是通過封裝後的api接口進行調用的，已經做了全局的token驗證，所以只需要把相關的參數帶上即可。

使用formData帶上需要的參數。上傳成功後，使用this.$emit("input", res.data)執行上傳成功後的邏輯。

這就封裝好了一個文件上傳的組件，接下來看看怎麼使用。

2、使用組件

在使用的頁面，首先需要引入組件

import FileUpload from '@/components/FileUpload'

然後再頁面內進行調用

<file-upload ref="fileUploadDialog" :billId="this.form.noticeId" :billType="10" @input="getAttachList"></file-upload>

billId和billType是我們動態傳入的參數，其他的參數使用默認值，getAttachList方法在文件上傳成功後執行。

我們需要一個按鈕喚醒文件上傳框

<el-button
       type="primary"
       plain
       icon="el-icon-plus"
       size="mini"
       @click="handleAdd"
       :disabled="notEdit"
     >上傳</el-button>

定義hangAdd方法，直接調用組件裏定義的show方法即可

handleAdd() {
   this.$refs.fileUploadDialog.show()
 },

然後定義文件上傳成功後的方法，獲取已上傳文件列表即可。

 getAttachList() {
   this.loading = true
   this.attachQuery.billId = this.form.noticeId
   this.attachQuery.billType = 10
   listAttachment(this.attachQuery).then(response => {
     this.attachList = response.rows
     this.attachList.forEach(el => {
       // 轉爲kb，取小數點後2位
       el.fileSize = parseFloat(el.fileSize / 1024).toFixed(2)
     })
     this.attachTotal = response.total
     this.loading = false
   }).catch(() => {})
 },

到這裏前端代碼就大功告成了。

3、後端代碼

我這裏選擇上傳圖片到阿里雲服務器，上傳到哪裏不重要

/**
 * 單據附件上傳
 * @param billId 單據id
 * @param formType 單據類型
 * @param file 上傳的文件
 * @return
 * @throws Exception
 */
@PostMapping("/form/attachment/upload")
public AjaxResult uploadFormFile(@RequestParam(value = "billId") Long billId,
                             @RequestParam(value = "formType") Integer formType,
                             @RequestParam("file") MultipartFile[] file) throws Exception {
    try {
        // 文件上傳後的路徑
        List<String> pathList = new ArrayList<>();

        for (MultipartFile f : file) {
            if (!f.isEmpty()) {
                // 調用接口上傳照片
                AjaxResult result = uploadService.uploadFormFile(f, billId, formType);
                if (!result.get("code").toString().equals("200")) {
                    return AjaxResult.error("上傳文件異常，請聯繫管理員");
                }
                pathList.add(result.get("data").toString());
            }
        }

        // 返回圖片路徑
        return AjaxResult.success(pathList);
    } catch (Exception e) {
        return AjaxResult.error(e.getMessage());
    }
}

這裏我們使用一個MultipartFile數組接受文件，然後調用方法判斷文件的一些屬性上傳文件即可，具體的上傳方法這裏就不貼了，各有不同，具體情況具體分析。

到這裏，本文就ok了。關於MIME 類型列表，可以點擊這裏查看。如果過程中遇到什麼問題，可以在下方留言，我會回覆的。

覺得好的可以幫忙點個贊啊，也可以關注我的公衆號【禿頭哥編程】