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

資訊專欄INFORMATION COLUMN

Element-UI中Upload上傳文件前端緩存處理

AlexTuan / 2425人閱讀

摘要：對(duì)于文件上傳組件的功能點(diǎn)著重于文件傳遞到后臺(tái)處理，所以要求為必填屬性。但是如果需要讀取本地文件并在前端直接處理，文件就沒有必要傳遞到后臺(tái)，比如在本地打開一個(gè)文件，利用文件在前端進(jìn)行動(dòng)態(tài)展示等等。

Element-UI對(duì)于文件上傳組件的功能點(diǎn)著重于文件傳遞到后臺(tái)處理，所以要求action為必填屬性。
但是如果需要讀取本地文件并在前端直接處理，文件就沒有必要傳遞到后臺(tái)，比如在本地打開一個(gè)JSON文件，利用JSON文件在前端進(jìn)行動(dòng)態(tài)展示等等。
下面就展示一下具體做法：
首先定義一個(gè)jsonContent, 我們的目標(biāo)是將本地選取的文件轉(zhuǎn)換為JSON賦值給jsonContent
然后我們的模板文件是利用el-dialog和el-upload兩個(gè)組件組合：這里停止文件自動(dòng)上傳模式:auto-upload="false"

 Load from File
  
    
      Select a file
      
upload only jpg/png files, and less than 500kb

    
    
      cancel
      confirm

最后通過html5的filereader對(duì)變量uploadFiles中的文件進(jìn)行讀取并賦值給jsonContent

if (this.uploadFiles) {
??????? for (let i = 0; i < this.uploadFiles.length; i++) {
????????? let file = this.uploadFiles[i]
????????? console.log(file.raw)
????????? if (!file) continue
????????? let reader = new FileReader()
????????? reader.onload = async (e) => {
??????????? try {
????????????? let document = JSON.parse(e.target.result)
????????????? console.log(document)
??????????? } catch (err) {
????????????? console.log(`load JSON document from file error: ${err.message}`)
????????????? this.showSnackbar(`Load JSON document from file error: ${err.message}`, 4000)
??????????? }
????????? }
????????? reader.readAsText(file.raw)
??????? }
????? }

為方便測(cè)試，以下是完整代碼：

PS： 相關(guān)閱讀

https://developer.mozilla.org...

作者：java_augur
來源：CSDN
原文：https://blog.csdn.net/java_au...
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！

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

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

相關(guān)文章

  • Element-UI中Upload上傳文件前端緩存處理

    摘要：對(duì)于文件上傳組件的功能點(diǎn)著重于文件傳遞到后臺(tái)處理，所以要求為必填屬性。但是如果需要讀取本地文件并在前端直接處理，文件就沒有必要傳遞到后臺(tái)，比如在本地打開一個(gè)文件，利用文件在前端進(jìn)行動(dòng)態(tài)展示等等。 Element-UI對(duì)于文件上傳組件的功能點(diǎn)著重于文件傳遞到后臺(tái)處理，所以要求action為必填屬性。但是如果需要讀取本地文件并在前端直接處理，文件就沒有必要傳遞到后臺(tái)，比如在本地打開一個(gè)JS...

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

  • Element-UI中Upload上傳文件前端緩存處理

    摘要：對(duì)于文件上傳組件的功能點(diǎn)著重于文件傳遞到后臺(tái)處理，所以要求為必填屬性。但是如果需要讀取本地文件并在前端直接處理，文件就沒有必要傳遞到后臺(tái)，比如在本地打開一個(gè)文件，利用文件在前端進(jìn)行動(dòng)態(tài)展示等等。 Element-UI對(duì)于文件上傳組件的功能點(diǎn)著重于文件傳遞到后臺(tái)處理，所以要求action為必填屬性。但是如果需要讀取本地文件并在前端直接處理，文件就沒有必要傳遞到后臺(tái)，比如在本地打開一個(gè)JS...

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

  • element-ui上傳下載excel（超詳細(xì)der）

    摘要：上傳組件點(diǎn)擊跳轉(zhuǎn)到該組件官方文檔用到的組件參數(shù)參數(shù)說明類型可選默認(rèn)值必選參數(shù)，上傳的地址上傳的文件列表接受上傳的文件類型覆蓋默認(rèn)的上傳行為最大允許上傳個(gè)數(shù)文件超出個(gè)數(shù)限制時(shí)的鉤子 1. 上傳 EXCEL Upload組件 點(diǎn)擊跳轉(zhuǎn)到該組件官方文檔 用到的upload組件參數(shù) 參數(shù) 說明 類型 可選 默認(rèn)值 action 必選參數(shù)，上傳的地址 string --- --...

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

  • Element-ui實(shí)現(xiàn)合并多圖上傳（一次請(qǐng)求多張圖片）

    摘要：實(shí)現(xiàn)多圖上傳主要用到以下兩個(gè)屬性是自帶多圖上傳的，但是細(xì)心的朋友可能發(fā)現(xiàn)默認(rèn)多圖的實(shí)現(xiàn)可能和我們預(yù)期有些出入，有截圖可以看出，實(shí)質(zhì)是進(jìn)行多次請(qǐng)求在上傳事件觸發(fā)后，多圖上傳的默認(rèn)實(shí)現(xiàn)調(diào)用了三次請(qǐng)求。 前言 工作中碰到需要多圖上傳，在使用element-ui解決過程中碰到一些問題，在這里分享給大家。 環(huán)境： Springboot+Vue+Element-ui 正文 這次上傳使用的是Elem...

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

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

0條評(píng)論

閱讀需要支付1元查看
<