成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue實(shí)現(xiàn)Excel本地下載及上傳的方法詳解

3403771864 / 1758人閱讀

　　在開發(fā)中，文件上傳下載是常見相關(guān)功能，現(xiàn)在就Excel在該功能進(jì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("文件大小超過(guò)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ù)器才行。


文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/127718.html

相關(guān)文章

  • 微信小程序?qū)W習(xí)與wepy框架的使用詳解

    摘要：，至此咱們的微信小程序的簡(jiǎn)單使用及了解算是分享完了，畢竟個(gè)人也是道行有限，沒(méi)有鉆研太深，這些只是本人在實(shí)際項(xiàng)目開發(fā)過(guò)程中用到和總結(jié)的經(jīng)驗(yàn)，有太多不足或不對(duì)的地方，希望大家多多給予指出與改正，咱們一起來(lái)共同學(xué)習(xí)與進(jìn)步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用，在國(guó)內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因?yàn)樗膫涫軞g迎度以及越來(lái)越被企業(yè)所重視，也就形成了咱們開...

    sf190404 評(píng)論0 收藏0

  • 微信小程序?qū)W習(xí)與wepy框架的使用詳解

    摘要：，至此咱們的微信小程序的簡(jiǎn)單使用及了解算是分享完了，畢竟個(gè)人也是道行有限，沒(méi)有鉆研太深，這些只是本人在實(shí)際項(xiàng)目開發(fā)過(guò)程中用到和總結(jié)的經(jīng)驗(yàn)，有太多不足或不對(duì)的地方，希望大家多多給予指出與改正，咱們一起來(lái)共同學(xué)習(xí)與進(jìn)步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用，在國(guó)內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因?yàn)樗膫涫軞g迎度以及越來(lái)越被企業(yè)所重視，也就形成了咱們開...

    stormjun 評(píng)論0 收藏0

  • 微信小程序?qū)W習(xí)與wepy框架的使用詳解

    摘要：，至此咱們的微信小程序的簡(jiǎn)單使用及了解算是分享完了，畢竟個(gè)人也是道行有限，沒(méi)有鉆研太深，這些只是本人在實(shí)際項(xiàng)目開發(fā)過(guò)程中用到和總結(jié)的經(jīng)驗(yàn)，有太多不足或不對(duì)的地方，希望大家多多給予指出與改正，咱們一起來(lái)共同學(xué)習(xí)與進(jìn)步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用，在國(guó)內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因?yàn)樗膫涫軞g迎度以及越來(lái)越被企業(yè)所重視，也就形成了咱們開...

    xiao7cn 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<