需求
使用Element UI 中的el-upload組件實(shí)現(xiàn)文件上傳和下載的功能。本文將介紹如何使用 Element UI 組件庫(kù)實(shí)現(xiàn) Excel 文件的上傳和下載功能。后臺(tái)接口返回的是數(shù)據(jù)流。
image.png
技術(shù)棧
- Vue.js
- Element UI
- Fetch API
實(shí)現(xiàn)步驟
1. 設(shè)置 HTML 結(jié)構(gòu)
首先,我們需要在 HTML 中引入 Element UI 的樣式和 Vue.js 庫(kù):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Element UI File Upload</title>
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!-- 文件上傳組件 -->
<el-upload>
<!-- 省略其他屬性和內(nèi)容 -->
</el-upload>
<!-- 下載鏈接和按鈕 -->
<div v-if="downloadUrl">
<a :href="downloadUrl" target="_blank">下載 Excel 文件</a>
<el-button type="primary" @click="downloadExcel">下載</el-button>
</div>
</div>
</body>
</html>
2. 實(shí)現(xiàn)文件上傳功能
在 Vue 實(shí)例中,我們需要定義一些數(shù)據(jù)和方法來(lái)實(shí)現(xiàn)文件上傳功能:
new Vue({
el: '#app',
data() {
return {
fileList: [],
downloadUrl: ''
}
},
methods: {
uploadFile(params) {
// 構(gòu)建表單數(shù)據(jù)
const formData = new FormData();
formData.append('file', params.file);
formData.append('item', '');
// 發(fā)送 POST 請(qǐng)求到上傳接口
fetch('https://wwwbaidu.com/dc/excelHandle', {
method: 'POST',
body: formData
})
.then(response => {
// 檢查返回狀態(tài)
if (response.ok) {
// 獲取二進(jìn)制數(shù)據(jù)
return response.blob();
} else {
console.error('Upload error:', response.status);
return Promise.reject(response.status);
}
})
.then(blob => {
console.log('Upload success:', blob);
// 上傳成功后更新文件列表
this.fileList.push({name: params.file.name, url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'});
// 將返回的字節(jié)碼轉(zhuǎn)換成 Excel 文件并提供下載地址
this.convertByteCodeToExcel(blob);
})
.catch(error => {
console.error('Upload error:', error);
});
}
}
})
在 uploadFile 方法中,我們使用 Fetch API 發(fā)送 POST 請(qǐng)求到上傳接口,并在成功回調(diào)中更新文件列表和轉(zhuǎn)換字節(jié)碼為 Excel 文件。
3. 實(shí)現(xiàn) Excel 文件下載功能
接下來(lái),我們需要實(shí)現(xiàn)將字節(jié)碼轉(zhuǎn)換為 Excel 文件并提供下載鏈接:
methods: {
convertByteCodeToExcel(byteCode) {
// 將字節(jié)碼轉(zhuǎn)換成 Blob 對(duì)象
const blob = new Blob([byteCode], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 創(chuàng)建下載鏈接
this.downloadUrl = URL.createObjectURL(blob);
},
downloadExcel() {
// 觸發(fā)下載
const link = document.createElement('a');
link.href = this.downloadUrl;
link.setAttribute('download', 'excel_file.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
在 convertByteCodeToExcel 方法中,我們將返回的字節(jié)碼轉(zhuǎn)換成 Blob 對(duì)象,并創(chuàng)建一個(gè)下載鏈接。在 downloadExcel 方法中,我們觸發(fā)下載操作。
總結(jié)
通過(guò)以上步驟,我們成功實(shí)現(xiàn)了 Excel 文件的上傳和下載功能。在實(shí)際開(kāi)發(fā)中,您可以根據(jù)需求進(jìn)一步完善這個(gè) demo,比如添加文件類(lèi)型和大小的校驗(yàn),以及錯(cuò)誤處理等。
希望本文對(duì)您有所幫助。如果您有任何疑問(wèn)或建議,歡迎隨時(shí)與我交流。
