本人業餘前端開發，因為公司(很坑)覺得我很牛逼，所以讓我前後端一起玩，無奈的我只能磕磕碰碰的研究起了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 型別列表，可以點選這裡檢視。如果過程中遇到什麼問題，可以在下方留言，我會回覆的。