欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年08月15日 10:04:26   投稿：jingxian  
這篇文章主要介紹了vue+elementUl導入文件方式(判斷文件格式)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

elementUl導入文件(判斷文件格式)

使用el-elment 的el-dropdown組件來寫下拉菜單效果。

下載模板比較簡單，直接點擊跳轉(zhuǎn)頁面，用window.open打開一個新的瀏覽器窗口方式下載模板文件。

選擇文件，用組件el-upload。需要做一個提示“只能上傳Excel文件”，用el-tooltip組件。

上傳文件需要在before-upload進行判斷文件格式。

判斷文件格式的思路

是獲取文件的后綴名，如果不是.xlsx就返回false,提示“文件格式只能是.xlsx！”

獲取文件后綴名用到了2個方法。lastIndexOf()和substring()

lastIndexOf() 方法可返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索

stringObject.substring(start,stop)
參數(shù)描述
start必需。一個非負的整數(shù)，規(guī)定要提取的子串的第一個字符在 stringObject 中的位置。
stop

可選。一個非負的整數(shù)，比要提取的子串的最后一個字符在 stringObject 中的位置多 1。

如果省略該參數(shù)，那么返回的子串會一直到字符串的結(jié)尾。

html

        <el-dropdown style="margin-left: 10px">
          <el-button type="primary">
            導入教師
            <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: {}, //拼接導入文件參數(shù)
      tableData: [], // 頁面table顯示的數(shù)據(jù)
 
    };
  },

methods

    // 下載模版
    modelDown() {
      window.open(
        "https://linkjoint-star.oss-cn-hongkong.aliyuncs.com/excel-template/教師導入模板.xlsx"
      );
    },
    // 提取文件后綴名
    getSuffix(str) {
      const fileExtension = str.substring(str.lastIndexOf(".") + 1);
      return fileExtension;
    },
    //導入前判斷
    beforeUpload(file) {
      let suffix = this.getSuffix(file.name);
      if (suffix !== "xlsx") {
        this.$message.error("文件格式只能是.xlsx");
        return false;
      }
    },
    //導入完成后提示
    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("服務器錯誤");
      }
      this.$refs.upload.clearFiles();
    },
    //導入錯誤提示
    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導出導入

導出（下載）

Vue+Element后端導出Excel

從后臺導出時，剛?cè)〉降奈募莻€流文件，需要把流文件進行轉(zhuǎn)換。

<el-button class=".el-dropdown-menu__item i" ?type="primary"?
icon="el-icon-upload2" @click="downloadTemplate()" >導出模板</el-button>
?downloadTemplate() {
? ? ? exportTemplate()
? ? ? ? .then(res => {
? ? ? ? ? if (!res) {
? ? ? ? ? ? return;
? ? ? ? ? }
? ? ? ? ? // 兼容IE瀏覽器
? ? ? ? ? if (window.navigator && window.navigator.msSaveOrOpenBlob) {
? ? ? ? ? ? window.navigator.msSaveOrOpenBlob(
? ? ? ? ? ? ? new Blob([res.data]),
? ? ? ? ? ? ? `文件名稱.xlsx`
? ? ? ? ? ? );
? ? ? ? ? } else {
? ? ? ? ? ? let url = window.URL.createObjectURL(new Blob([res.data])); //取到url。創(chuàng)建一個 DOMString，其中包含一個表示參數(shù)中給出的對象res的URL。這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。
? ? ? ? ? ? let link = document.createElement("a"); //觸發(fā)鼠標事件對象
? ? ? ? ? ? link.style.display = "none"; //清除a標簽樣式
? ? ? ? ? ? link.href = url; //設置下載地址
? ? ? ? ? ? link.setAttribute("download", `文件名稱.xlsx`); //給a標簽添加download屬性，并為其賦值
? ? ? ? ? ? document.body.appendChild(link); //向節(jié)點添加一個子節(jié)點
? ? ? ? ? ? link.click(); //執(zhí)行click事件
? ? ? ? ? }
? ? ? ? })
? ? ? ? .catch(error => {
? ? ? ? });
? ? },

前端導出Excel的方法，后期有機會再總結(jié)吧。

導入（上傳）

Vue+Element后端導入Excel

先讀取excel，通過接口把讀出的數(shù)據(jù)result傳給后臺

?<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"
? ? ?>導入</el-button>
</el-upload>
import XLSX from "xlsx";

讀取excel

// 讀取excel
? ? readExcel(file) {
? ? ? var reader = new FileReader(); //啟動讀取指定的File 內(nèi)容
? ? ? reader.readAsArrayBuffer(file.raw); //當讀取操作完成時,會觸發(fā)一個 load 事件,從而可以使用 reader.onload 屬性對該事件進行處理。
? ? ? 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(); //清除當前 files
? ? ? ? if (result.length < 2503) {
? ? ? ? ? this.dataDetail(result);
? ? ? ? } else {
? ? ? ? ? this.$message("每次導入數(shù)據(jù)最多2500條");
? ? ? ? }
? ? ? ? return result;
? ? ? };
? ? },
//通過接口把讀出來的result傳給后臺
dataDetail(result) {
//result內(nèi)容格式的校驗、必填項的校驗
? importReord(result)
? ? ? ? .then(res => {
? ? ? ? ? ? this.getRecordList();
? ? ? ? ? ? if (res.data.msg == "批量新增成功") {
? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? message: "數(shù)據(jù)導入成功",
? ? ? ? ? ? ? ? type: "success"
? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ?.catch(error => {
? ? ? ? ? ? if (error.response.status == 403) {
? ? ? ? ? ? ? this.$message.error("無操作權(quán)限");
? ? ? ? ? ? } else {
? ? ? ? ? ? ? this.$message.error("數(shù)據(jù)導入失敗");
? ? ? ? ? ? }
? ? ? ? ? });
}

校驗時間格式

格式 ： 2020-02-12 12:00

?//校驗時間格式
? ? 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;
? ? ? }
? ? }

校驗IP地址格式

格式 ： 10.1.1.12 或 10.1.12/24

?//校驗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);
? ? ? }
? ? },

注意：在進行格式檢驗時，一定要記得判斷值為" "或者undefined的情況，否則很容易出現(xiàn)bug。

Vue+Element前端導入Excel

前端導入需要先讀取excel，把讀出的數(shù)據(jù)渲染在前端界面上（如：table表格中，此時如果刷新界面，那數(shù)據(jù)就會沒有了），然后通過提交或者保存的方式傳給后臺。讀取excel的方法上面已經(jīng)有了。 

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

相關(guān)文章

  • Vue Element Sortablejs實現(xiàn)表格列的拖拽案例詳解

    Vue Element Sortablejs實現(xiàn)表格列的拖拽案例詳解

    這篇文章主要介紹了Vue Element Sortablejs實現(xiàn)表格列的拖拽案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • vue2 前后端分離項目ajax跨域session問題解決方法

    vue2 前后端分離項目ajax跨域session問題解決方法

    本篇文章主要介紹了vue2 前后端分離項目ajax跨域session問題解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-04-04
  • Vuex中的Mutations的具體使用方法

    Vuex中的Mutations的具體使用方法

    這篇文章主要介紹了Vuex中的Mutations的具體使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • 詳解vue項目優(yōu)化之按需加載組件-使用webpack require.ensure

    詳解vue項目優(yōu)化之按需加載組件-使用webpack require.ensure

    本篇文章主要介紹了詳解vue項目優(yōu)化之按需加載組件-使用webpack require.ensure，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-06-06
  • 關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題

    關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題

    v-if 有更高的切換開銷,而 v-show 有更高的出事渲染開銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點;如果在運行時條件不太可能改變,則使用v-if 好點
    2018-03-03
  • 在Vue的mounted中仍然加載渲染不出echarts的方法問題

    在Vue的mounted中仍然加載渲染不出echarts的方法問題

    這篇文章主要介紹了在Vue的mounted中仍然加載渲染不出echarts的方法問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue使用mixins優(yōu)化組件

    vue使用mixins優(yōu)化組件

    這篇文章主要介紹了vue如何使用mixins優(yōu)化組件，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
    2021-04-04
  • Vue2.0 組件傳值通訊的示例代碼

    Vue2.0 組件傳值通訊的示例代碼

    本篇文章主要介紹了Vue2.0 組件傳值通訊的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • vue封裝TabBar組件的完整步驟記錄

    vue封裝TabBar組件的完整步驟記錄

    組件封裝是為了復用,換成大白話就是,同樣的事情我不想做第二遍,節(jié)省出來的時間用來看動漫不香嗎,下面這篇文章主要給大家介紹了關(guān)于vue封裝TabBar組件的完整步驟,需要的朋友可以參考下
    2021-10-10
  • 使用vue3+vite導入圖片路徑錯亂問題排查及解決

    使用vue3+vite導入圖片路徑錯亂問題排查及解決

    使用vue3+vite開發(fā)的時候,導入svg圖片時,同一個文件夾下的文件,其中一個路徑正常解析,另一個不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導入圖片路徑錯亂問題排查及解決,需要的朋友可以參考下
    2024-03-03

最新評論