Vue實現Excel本地下載及上傳的方法詳解

3403771864 發布于2022-09-14 22:23 / 1743人閱讀

　　在開發中，文件上傳下載是常見相關功能，現在就Excel在該功能進行講述：

　　咱直接看代碼：

　　<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表格模板內字段格式進行上傳
　　</div>
　　<div class="import-notice">2. 導入表格數量控制在10000條以內</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("請選擇導入的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("請選擇導入的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("請選擇導入的excel文檔！");
　　document.querySelector("#fileinput").value = "";
　　this.fileName = "";
　　return false;
　　}
　　},

　　上述代碼只是在后臺接口，前端還需做些簡單操作，需要上傳Excel的話需要先上傳到服務器才行。

GPU云服務器云服務器本地文件上傳到云服務器的方法阿里云服務器上傳用vue做好的頁面變量及數據詳解 database詳解及實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127718.html

微信小程序學習與wepy框架的使用詳解

摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發過程中用到和總結的經驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學習與進步微信小程序是一種不需要下載安裝即可使用的應用，在國內它在企業推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業所重視，也就形成了咱們開...

sf190404 2019-08-29 16:09 評論0 收藏0
微信小程序學習與wepy框架的使用詳解

摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發過程中用到和總結的經驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學習與進步微信小程序是一種不需要下載安裝即可使用的應用，在國內它在企業推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業所重視，也就形成了咱們開...

stormjun 2019-08-23 10:24 評論0 收藏0
微信小程序學習與wepy框架的使用詳解

摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發過程中用到和總結的經驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學習與進步微信小程序是一種不需要下載安裝即可使用的應用，在國內它在企業推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業所重視，也就形成了咱們開...

xiao7cn 2019-08-02 11:02 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0