本人業(yè)余前端開發(fā)漫玄，因為公司(很坑)覺得我很牛逼，所以讓我前后端一起玩压彭，無奈的我只能磕磕碰碰的研究起了vue睦优。
開發(fā)項目的時候，用到文件上傳的功能很常見壮不，包括單文件上傳和多文件上傳汗盘，上傳各種類型的文件。在vue里面要實現(xiàn)多文件上傳功能忆畅，還是很方便的衡未。
本文就一起來學(xué)習(xí)一下尸执，如何把多文件上傳功能封裝成一個組件家凯，后面需要使用的時候，直接兩三行代碼就能搞定绊诲。
1、前端代碼
首先我們先看前端褪贵，如何把它封裝成一個組件掂之。我們在調(diào)用它的時候抗俄，可能需要從外部傳入一些參數(shù)給它，所以我們需要定義一些傳入?yún)?shù)世舰。這些參數(shù)我們可以放到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
},
// 單據(jù)id
billId: {
type: Number,
require: true
},
// 單據(jù)類型
billType: {
type: Number,
required: true
}
}
}
上面定義了一些文件大小动雹，文件類型等，如果沒有傳入跟压，則為默認(rèn)值胰蝠。單據(jù)類型和單據(jù)id是必須要傳入的，這里可以依照實際開發(fā)需要進(jìn)行定義即可震蒋。
文件上傳組件茸塞，我們可以使用element的el-upload，在頁面引入查剖，我們點擊后一般喚醒的是一個文件上傳彈窗钾虐，可以使用el-dialog標(biāo)簽包圍。完整代碼如下
<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"
: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">上傳到服務(wù)器</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字段需要在頁面創(chuàng)建后效扫，通過傳入或默認(rèn)的fileType字段進(jìn)行拼接得到
created() {
this.fileList = this.list
// 拼接
this.fileType.forEach(el => {
this.accept += el
this.accept += ','
})
this.fileType.slice(0, this.fileList.length - 2)
},
接下來就是文件上傳相關(guān)的方法，這里我們使用選擇文件后手動上傳的方式直砂，請看下面的代碼
<el-upload
:action="action" // 手動上傳荡短，這個參數(shù)沒有用，但因為是必填的哆键，所以隨便填一個值就行
:before-upload="handleBeforeUpload" // 文件上傳之前進(jìn)行的操作
:file-list="fileList" // 已選擇文件列表
:limit="3" // 一次最多上傳幾個文件
multiple // 可以多選
:accept="accept" // 可以上傳的文件類型
:on-error="handleUploadError" // 上傳出錯時調(diào)用
:on-exceed="handleExceed" // 文件數(shù)量超過限制時調(diào)用
:on-success="handleUploadSuccess" // 上傳成功時調(diào)用
:on-change="handChange" // 文件發(fā)生變化時調(diào)用
:http-request="httpRequest" // 自定義的文件上傳方法掘托，我們手動點擊上傳按鈕后會調(diào)用
:show-file-list="true" // 是否顯示文件列表
:auto-upload="false" // 關(guān)閉自動上傳
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">上傳到服務(wù)器</el-button>
點擊上傳到服務(wù)器后，就觸發(fā)submitUpload調(diào)用我們自定義的方法籍嘹。
注意這里選取文件的按鈕需要加上slot="trigger"屬性闪盔，不然點擊上傳到服務(wù)器按鈕后，也會觸發(fā)選擇文件彈框辱士。
接下來看相關(guān)的方法
methods: {
// 外部調(diào)用這個方法泪掀，顯示文件上傳彈窗
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;
},
// 文件個數(shù)超出
handleExceed() {
this.$message.error(`只允許上傳3個文件`);
},
// 上傳失敗
handleUploadError(err) {
this.$message.error("上傳失敗, 請重試");
},
// 上傳成功回調(diào)
handleUploadSuccess(res, file) {
this.$message.success("上傳成功");
this.cancel()
},
/** 文件狀態(tài)改變時調(diào)用 */
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) {
this.msgError('請選擇文件上傳')
return false
}
const formData = new FormData()
formData.append("billId", this.billId)
formData.append("formType", this.billType)
// 把多個文件放到同一個請求里，這樣只會請求一次接口颂碘。否則一個文件就會請求一次
this.fileList.forEach(el => {
formData.append('file', el.raw)
})
uploadFormFile(formData).then(res => {
if(res.code === 200){
this.$refs.upload.clearFiles()
this.msgSuccess("上傳成功")
this.$emit("input", res.data)
}
}).catch((err)=>{})
},
/** 關(guān)閉上傳彈框 */
cancel() {
this.fileList = []
this.visible = false
},
}
其他方法都還好异赫，主要看看這個submitUpload方法，如果直接使用url的方式進(jìn)行調(diào)用头岔，會出現(xiàn)跨域問題塔拳，你需要把token放到請求頭里。我這里是通過封裝后的api接口進(jìn)行調(diào)用的峡竣，已經(jīng)做了全局的token驗證靠抑，所以只需要把相關(guān)的參數(shù)帶上即可。
使用formData帶上需要的參數(shù)适掰。注意el-upload組件一次請求只會攜帶一個文件颂碧，所以即使是多文件上傳荠列，就會請求多次后端接口，這顯然是不太好的载城。這里可以把多個文件一次性放到FormData里肌似，這樣就只會請求一次后端接口了。
// 把多個文件放到同一個請求里诉瓦，這樣只會請求一次接口锈嫩。否則一個文件就會請求一次
this.fileList.forEach(el => {
formData.append('file', el.raw)
})
這就封裝好了一個文件上傳的組件，接下來看看怎么使用垦搬。
2呼寸、使用組件
在使用的頁面，首先需要引入組件
import FileUpload from '@/components/FileUpload'
然后再頁面內(nèi)進(jìn)行調(diào)用
<file-upload ref="fileUploadDialog" :billId="this.form.noticeId" :billType="10" @input="getAttachList"></file-upload>
billId和billType是我們動態(tài)傳入的參數(shù)猴贰，其他的參數(shù)使用默認(rèn)值对雪，getAttachList方法在文件上傳成功后執(zhí)行。
我們需要一個按鈕喚醒文件上傳框
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
:disabled="notEdit"
>上傳</el-button>
定義hangAdd方法米绕，直接調(diào)用組件里定義的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 => {
// 轉(zhuǎn)為kb栅干，取小數(shù)點后2位
el.fileSize = parseFloat(el.fileSize / 1024).toFixed(2)
})
this.attachTotal = response.total
this.loading = false
}).catch(() => {})
},
到這里前端代碼就大功告成了迈套。
在這里插入圖片描述
3、后端代碼
我這里選擇上傳圖片到阿里云服務(wù)器碱鳞，上傳到哪里不重要
/**
* 單據(jù)附件上傳
* @param billId 單據(jù)id
* @param formType 單據(jù)類型
* @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()) {
// 調(diào)用接口上傳照片
AjaxResult result = uploadService.uploadFormFile(f, billId, formType);
if (!result.get("code").toString().equals("200")) {
return AjaxResult.error("上傳文件異常桑李，請聯(lián)系管理員");
}
pathList.add(result.get("data").toString());
}
}
// 返回圖片路徑
return AjaxResult.success(pathList);
} catch (Exception e) {
return AjaxResult.error(e.getMessage());
}
}
這里我們使用一個MultipartFile數(shù)組接受文件，然后調(diào)用方法判斷文件的一些屬性上傳文件即可窿给，具體的上傳方法這里就不貼了贵白，各有不同，具體情況具體分析崩泡。
到這里禁荒，本文就ok了。關(guān)于MIME 類型列表角撞，可以點擊這里查看呛伴。如果過程中遇到什么問題，可以在下方留言谒所，我會回復(fù)的热康。
