Vue實(shí)現(xiàn)Excel本地下載及上傳的方法詳解
相信大家在項(xiàng)目中經(jīng)常會(huì)遇到一些上傳下載文件的相關(guān)功能,本文就Excel的相關(guān)功能進(jìn)行簡(jiǎn)述:

咱直接看代碼:
<div class="import-main-content">
<div class="import-main-button" @click="checkFile">
<div class="import-center" style="cursor: hand">
<div>+</div>
<div>上傳Excel文件</div>
</div>
</div>
<div style="margin: 5px auto; width: 350px">
<div class="image-multiple-area" v-if="fileName">
<span>{{ fileName }}</span>
<img
@click="removes"
style="position: absolute; top: -1px; right: -1px"
src="@/assets/icons/tag-remove-icon.png"
class="remove-excel"
alt=""
/>
</div>
<div v-else>尚未選擇文件!</div>
<div class="import-notice">注意:</div>
<div class="import-notice">
1. 請(qǐng)按照Excel表格模板內(nèi)字段格式進(jìn)行上傳
</div>
<div class="import-notice">2. 導(dǎo)入表格數(shù)量控制在10000條以內(nèi)</div>
<div class="import-notice">
3. Excel表格模板點(diǎn)擊下載:<span
style="color: #277cf0"
@click="downLoadModel"
>Excel表格模板</span
>
</div>
</div>
<input
type="file"
id="fileinput"
style="display: none"
@change="checkFileSure"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
/>
</div>
data () {
return {
fileName: "", //Excel文件
fileDir: "", //Excel文件路徑
}
},
checkFile() {
document.querySelector("#fileinput").click();
},
checkFileSure() {
let fileObj = document.querySelector("#fileinput").files[0];
let file = document.querySelector("#fileinput");
if (fileObj) {
this.fileName = fileObj.name;
// 文件類型
let fileType = fileObj.type;
let fileSize = fileObj.size;
// 文件大小
if (
!(
fileType === "application/vnd.ms-excel" ||
fileType ===
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
)
) {
this.msgError("上傳文件僅支持 Excel 格式!");
file.value = "";
return false;
} else if (fileSize / 1024 / 1024 > 50) {
this.msgError("文件大小超過50M!");
file.value = "";
return false;
}
this.importDone();
} else {
this.$message.error("請(qǐng)選擇導(dǎo)入的excel文檔!");
return false;
}
},
//下載Excel模版
downLoadModel() {
//getImportTempFile4Prize 為下載excel 模板接口
getImportTempFile4Prize().then((res) => {
window.location.href = `${this.$store.state.weShop.IMGHEAD}${res.URI}`;
});
},
importDone() {
if (this.fileName == null || this.fileName === "") {
this.$message.error("請(qǐng)選擇導(dǎo)入的excel文檔!");
return;
}
let fileObj = document.querySelector("#fileinput").files[0];
console.log(fileObj.name);
let file = document.querySelector("#fileinput");
console.log(file);
if (fileObj?.name) {
let formData = new FormData();
formData.append("file", fileObj);
formData.append("upload_type", "02");
let fileType = fileObj.type.split("/")[1];
// uploadExcel 為后臺(tái)上傳Excel 接口
uploadExcel(formData, fileType)
.then((res) => {
file.value = "";
this.fileDir = res.PATH;
this.form.PRIZE_NUM = res.NUM;
})
.catch(() => {
file.value = "";
})
.then((res) => {});
document.querySelector("#fileinput").value = "";
} else {
this.$message.error("請(qǐng)選擇導(dǎo)入的excel文檔!");
document.querySelector("#fileinput").value = "";
this.fileName = "";
return false;
}
},
以上邏輯在后臺(tái)接口,前端主要做的是一些簡(jiǎn)要的操作,需要上傳Excel的話需要先上傳到服務(wù)器才行。
到此這篇關(guān)于Vue實(shí)現(xiàn)Excel本地下載及上傳的方法詳解的文章就介紹到這了,更多相關(guān)Vue Excel下載上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧
這篇文章主要介紹了vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
Vue使用screenfull實(shí)現(xiàn)全屏效果
這篇文章主要為大家詳細(xì)介紹了Vue使用screenfull實(shí)現(xiàn)全屏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)
這篇文章主要介紹了vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue3 + CSS實(shí)現(xiàn)一個(gè)噴火龍動(dòng)畫效果
不知不覺中,2023年已然逝去了,龍年到了,所以本文小編使用Vue3 + CSS實(shí)現(xiàn)一個(gè)噴火龍的動(dòng)畫效果,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手嘗試一下2024-02-02
vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式
這篇文章主要介紹了vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
VUE項(xiàng)目去除input 框值所有空格的操作方法
這篇文章主要介紹了VUE項(xiàng)目去除input 框值所有空格的操作方法,主要包括去除空格的方法、正則和element ui寫法,本文給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
使用Vue-cli 3.0搭建Vue項(xiàng)目的方法
這篇文章主要介紹了使用Vue-cli 3.0搭建Vue項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06

