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

Donne 發布于2019-08-30 15:55 / 3306人閱讀

摘要：對于文件上傳組件的功能點著重于文件傳遞到后臺處理，所以要求為必填屬性。但是如果需要讀取本地文件并在前端直接處理，文件就沒有必要傳遞到后臺，比如在本地打開一個文件，利用文件在前端進行動態展示等等。

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

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

最后通過html5的filereader對變量uploadFiles中的文件進行讀取并賦值給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)
??????? }
????? }

為方便測試，以下是完整代碼：

PS：相關閱讀

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

作者：java_augur
來源：CSDN
原文：https://blog.csdn.net/java_au...
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

云服務器 GPU云服務器 nginx上傳文件緩存 asp中上傳文件 asp中如何上傳文件 asp中文件上傳組件

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

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

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

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

AlexTuan 2019-08-23 15:21 評論0 收藏0
Element-UI中Upload上傳文件前端緩存處理

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

My_Oh_My 2019-08-02 14:18 評論0 收藏0
element-ui上傳下載excel（超詳細der）

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

Jeffrrey 2019-08-23 15:10 評論0 收藏0
Element-ui實現合并多圖上傳（一次請求多張圖片）

摘要：實現多圖上傳主要用到以下兩個屬性是自帶多圖上傳的，但是細心的朋友可能發現默認多圖的實現可能和我們預期有些出入，有截圖可以看出，實質是進行多次請求在上傳事件觸發后，多圖上傳的默認實現調用了三次請求。前言工作中碰到需要多圖上傳，在使用element-ui解決過程中碰到一些問題，在這里分享給大家。環境： Springboot+Vue+Element-ui 正文這次上傳使用的是Elem...

loostudy 2019-08-19 10:51 評論0 收藏0