Vue實現(xiàn)Excel本地下載及上傳的方法詳解
更新時間:2022年07月14日 09:32:03 作者:jimyking
相信大家在項目中經(jīng)常會遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實現(xiàn)Excel本地下載及上傳的示例代碼,需要的可以參考一下
相信大家在項目中經(jīng)常會遇到一些上傳下載文件的相關(guān)功能,本文就Excel的相關(guā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. 請按照Excel表格模板內(nèi)字段格式進行上傳 </div> <div class="import-notice">2. 導(dǎo)入表格數(shù)量控制在10000條以內(nèi)</div> <div class="import-notice"> 3. Excel表格模板點擊下載:<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("請選擇導(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("請選擇導(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 為后臺上傳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("請選擇導(dǎo)入的excel文檔!"); document.querySelector("#fileinput").value = ""; this.fileName = ""; return false; } },
以上邏輯在后臺接口,前端主要做的是一些簡要的操作,需要上傳Excel的話需要先上傳到服務(wù)器才行。
到此這篇關(guān)于Vue實現(xiàn)Excel本地下載及上傳的方法詳解的文章就介紹到這了,更多相關(guān)Vue Excel下載上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中父子組件注意事項,傳值及slot應(yīng)用技巧
這篇文章主要介紹了vue中父子組件注意事項,傳值及slot應(yīng)用技巧,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)
這篇文章主要介紹了vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09