vue+elementUl導(dǎo)入文件方式(判斷文件格式)
elementUl導(dǎo)入文件(判斷文件格式)

使用el-elment 的el-dropdown組件來(lái)寫(xiě)下拉菜單效果。
下載模板比較簡(jiǎn)單,直接點(diǎn)擊跳轉(zhuǎn)頁(yè)面,用window.open打開(kāi)一個(gè)新的瀏覽器窗口方式下載模板文件。
選擇文件,用組件el-upload。需要做一個(gè)提示“只能上傳Excel文件”,用el-tooltip組件。
上傳文件需要在before-upload進(jìn)行判斷文件格式。
判斷文件格式的思路
是獲取文件的后綴名,如果不是.xlsx就返回false,提示“文件格式只能是.xlsx!”
獲取文件后綴名用到了2個(gè)方法。lastIndexOf()和substring()
lastIndexOf() 方法可返回一個(gè)指定的字符串值最后出現(xiàn)的位置,在一個(gè)字符串中的指定位置從后向前搜索
stringObject.substring(start,stop)
| 參數(shù) | 描述 |
|---|---|
| start | 必需。一個(gè)非負(fù)的整數(shù),規(guī)定要提取的子串的第一個(gè)字符在 stringObject 中的位置。 |
| stop | 可選。一個(gè)非負(fù)的整數(shù),比要提取的子串的最后一個(gè)字符在 stringObject 中的位置多 1。 如果省略該參數(shù),那么返回的子串會(huì)一直到字符串的結(jié)尾。 |
html
<el-dropdown style="margin-left: 10px">
<el-button type="primary">
導(dǎo)入教師
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<span @click="modelDown">下載模板</span>
</el-dropdown-item>
<el-dropdown-item>
<el-upload
ref="upload"
action="/api/teacher/import"
:limit="1"
:data="uploadFile"
:on-error="uploadError"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
>
<div class="right">
<el-tooltip
class="item"
effect="dark"
content="只能上傳Excel文件"
placement="right"
>
<el-button type="text">選擇文件</el-button>
</el-tooltip>
</div>
</el-upload>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>data:
data() {
return {
uploadFile: {}, //拼接導(dǎo)入文件參數(shù)
tableData: [], // 頁(yè)面table顯示的數(shù)據(jù)
};
},methods
// 下載模版
modelDown() {
window.open(
"https://linkjoint-star.oss-cn-hongkong.aliyuncs.com/excel-template/教師導(dǎo)入模板.xlsx"
);
},
// 提取文件后綴名
getSuffix(str) {
const fileExtension = str.substring(str.lastIndexOf(".") + 1);
return fileExtension;
},
//導(dǎo)入前判斷
beforeUpload(file) {
let suffix = this.getSuffix(file.name);
if (suffix !== "xlsx") {
this.$message.error("文件格式只能是.xlsx");
return false;
}
},
//導(dǎo)入完成后提示
uploadSuccess(res, file) {
console.log("res", res);
if (res.status_code == 200) {
if (res.data.status == 200) {
this.$message({ message: `${res.data.msg}`, type: "success" });
this.getData();
} else {
this.$message({ message: `${res.data.msg}`, type: "warning" });
}
} else {
this.$message.error("服務(wù)器錯(cuò)誤");
}
this.$refs.upload.clearFiles();
},
//導(dǎo)入錯(cuò)誤提示
uploadError(err, file) {
let error = JSON.parse(err.message);
console.log(file);
if (error.status_code == 422) {
this.$message.error(error.message);
}
this.$refs.upload.clearFiles();
},vue element導(dǎo)出導(dǎo)入
導(dǎo)出(下載)
Vue+Element后端導(dǎo)出Excel
從后臺(tái)導(dǎo)出時(shí),剛?cè)〉降奈募莻€(gè)流文件,需要把流文件進(jìn)行轉(zhuǎn)換。
<el-button class=".el-dropdown-menu__item i" ?type="primary"? icon="el-icon-upload2" @click="downloadTemplate()" >導(dǎo)出模板</el-button>
?downloadTemplate() {
? ? ? exportTemplate()
? ? ? ? .then(res => {
? ? ? ? ? if (!res) {
? ? ? ? ? ? return;
? ? ? ? ? }
? ? ? ? ? // 兼容IE瀏覽器
? ? ? ? ? if (window.navigator && window.navigator.msSaveOrOpenBlob) {
? ? ? ? ? ? window.navigator.msSaveOrOpenBlob(
? ? ? ? ? ? ? new Blob([res.data]),
? ? ? ? ? ? ? `文件名稱(chēng).xlsx`
? ? ? ? ? ? );
? ? ? ? ? } else {
? ? ? ? ? ? let url = window.URL.createObjectURL(new Blob([res.data])); //取到url。創(chuàng)建一個(gè) DOMString,其中包含一個(gè)表示參數(shù)中給出的對(duì)象res的URL。這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。
? ? ? ? ? ? let link = document.createElement("a"); //觸發(fā)鼠標(biāo)事件對(duì)象
? ? ? ? ? ? link.style.display = "none"; //清除a標(biāo)簽樣式
? ? ? ? ? ? link.href = url; //設(shè)置下載地址
? ? ? ? ? ? link.setAttribute("download", `文件名稱(chēng).xlsx`); //給a標(biāo)簽添加download屬性,并為其賦值
? ? ? ? ? ? document.body.appendChild(link); //向節(jié)點(diǎn)添加一個(gè)子節(jié)點(diǎn)
? ? ? ? ? ? link.click(); //執(zhí)行click事件
? ? ? ? ? }
? ? ? ? })
? ? ? ? .catch(error => {
? ? ? ? });
? ? },前端導(dǎo)出Excel的方法,后期有機(jī)會(huì)再總結(jié)吧。
導(dǎo)入(上傳)
Vue+Element后端導(dǎo)入Excel
先讀取excel,通過(guò)接口把讀出的數(shù)據(jù)result傳給后臺(tái)
?<el-upload ? ? ref="upload" ? ? :show-file-list="false" ? ? :on-change="readExcel" ? ? :auto-upload="false" ? ? :limit="1" ? ? :action="'/api/xxxx/xxxxxxxxxxxxx/'" ? ? accept=".xlsx" ? ? style="width:100%;" ? > ? <el-button ? ? ?type="primary" ? ? ?class=".el-dropdown-menu__item i" ? ? ?slot="trigger" ? ? ?icon="el-icon-download" ? ? ?>導(dǎo)入</el-button> </el-upload>
import XLSX from "xlsx";
讀取excel
// 讀取excel
? ? readExcel(file) {
? ? ? var reader = new FileReader(); //啟動(dòng)讀取指定的File 內(nèi)容
? ? ? reader.readAsArrayBuffer(file.raw); //當(dāng)讀取操作完成時(shí),會(huì)觸發(fā)一個(gè) load 事件,從而可以使用 reader.onload 屬性對(duì)該事件進(jìn)行處理。
? ? ? reader.onload = e => { ? ? ? ?//獲取文件數(shù)據(jù)
? ? ? ? const data = e.target.result; //XLSX讀取文件
? ? ? ? const wb = XLSX.read(data, { type: "array" }); ?//獲取第一張表
? ? ? ? const wsname = wb.SheetNames[0];
? ? ? ? const ws = wb.Sheets[wsname];
? ? ? ? var result = XLSX.utils.sheet_to_json(ws, { header: 1 });
? ? ? ? this.$refs.upload.clearFiles(); //清除當(dāng)前 files
? ? ? ? if (result.length < 2503) {
? ? ? ? ? this.dataDetail(result);
? ? ? ? } else {
? ? ? ? ? this.$message("每次導(dǎo)入數(shù)據(jù)最多2500條");
? ? ? ? }
? ? ? ? return result;
? ? ? };
? ? },
//通過(guò)接口把讀出來(lái)的result傳給后臺(tái)
dataDetail(result) {
//result內(nèi)容格式的校驗(yàn)、必填項(xiàng)的校驗(yàn)
? importReord(result)
? ? ? ? .then(res => {
? ? ? ? ? ? this.getRecordList();
? ? ? ? ? ? if (res.data.msg == "批量新增成功") {
? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? message: "數(shù)據(jù)導(dǎo)入成功",
? ? ? ? ? ? ? ? type: "success"
? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ?.catch(error => {
? ? ? ? ? ? if (error.response.status == 403) {
? ? ? ? ? ? ? this.$message.error("無(wú)操作權(quán)限");
? ? ? ? ? ? } else {
? ? ? ? ? ? ? this.$message.error("數(shù)據(jù)導(dǎo)入失敗");
? ? ? ? ? ? }
? ? ? ? ? });
}校驗(yàn)時(shí)間格式
格式 : 2020-02-12 12:00
?//校驗(yàn)時(shí)間格式
? ? istimeCheck(keyword) {
? ? ? // let emIP = this.periodCheck.replace(/\s+/g, ""); //循環(huán)去空
? ? ? let emIP = this.periodCheck.replace(/(^\s*)|(\s*$)/g, ""); //去除首尾空格
? ? ? let timeArray = emIP.split("-"); //把字符串轉(zhuǎn)換為數(shù)組
? ? ? var result = timeArray.map(function(item, index, timeArray) {
? ? ? ? // var reg = /^[1-9]\d{3}.(0[1-9]|1[0-2]).(0[1-9][0-1][0-9]|0[1-9]2[0-3]|[1-2][0-9][0-1][0-9]|[1-2][0-9]2[0-3]|3[0-1][0-1][0-9]|3[0-1]2[0-3]):[0-5][0-9]$/;
? ? ? ? var reg = /^((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3}).(((0[13578]|1[02]).(0[1-9]|[12][0-9]|3[01]))|((0[469]|11).(0[1-9]|[12][0-9]|30))|(02.(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00)).02.29)) ([0-1][0-9]|2[0-3]):([0-5][0-9])$/;
? ? ? ? return reg.test(item);
? ? ? });
? ? ? if (result.indexOf(false) > -1) {
? ? ? ? return false;
? ? ? } else {
? ? ? ? return true;
? ? ? }
? ? }校驗(yàn)IP地址格式
格式 : 10.1.1.12 或 10.1.12/24
?//校驗(yàn)IP地址格式
? ? isValidIP(keyword) {
? ? ? let emIP = this.OValidIP.replace(/\s+/g, ""); //字符串去空
? ? ? if (emIP.indexOf("/") > -1) {
? ? ? ? var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\/(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
? ? ? ? return reg.test(emIP);
? ? ? } else {
? ? ? ? var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
? ? ? ? return reg.test(emIP);
? ? ? }
? ? },注意:在進(jìn)行格式檢驗(yàn)時(shí),一定要記得判斷值為" "或者undefined的情況,否則很容易出現(xiàn)bug。
Vue+Element前端導(dǎo)入Excel
前端導(dǎo)入需要先讀取excel,把讀出的數(shù)據(jù)渲染在前端界面上(如:table表格中,此時(shí)如果刷新界面,那數(shù)據(jù)就會(huì)沒(méi)有了),然后通過(guò)提交或者保存的方式傳給后臺(tái)。讀取excel的方法上面已經(jīng)有了。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解
這篇文章主要介紹了Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue2 前后端分離項(xiàng)目ajax跨域session問(wèn)題解決方法
本篇文章主要介紹了vue2 前后端分離項(xiàng)目ajax跨域session問(wèn)題解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
詳解vue項(xiàng)目?jī)?yōu)化之按需加載組件-使用webpack require.ensure
本篇文章主要介紹了詳解vue項(xiàng)目?jī)?yōu)化之按需加載組件-使用webpack require.ensure,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問(wèn)題
v-if 有更高的切換開(kāi)銷(xiāo),而 v-show 有更高的出事渲染開(kāi)銷(xiāo).因此,如果需要非常頻繁的切換,那么使用v-show好一點(diǎn);如果在運(yùn)行時(shí)條件不太可能改變,則使用v-if 好點(diǎn)2018-03-03
在Vue的mounted中仍然加載渲染不出echarts的方法問(wèn)題
這篇文章主要介紹了在Vue的mounted中仍然加載渲染不出echarts的方法問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問(wèn)題排查及解決
使用vue3+vite開(kāi)發(fā)的時(shí)候,導(dǎo)入svg圖片時(shí),同一個(gè)文件夾下的文件,其中一個(gè)路徑正常解析,另一個(gè)不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問(wèn)題排查及解決,需要的朋友可以參考下2024-03-03

