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

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供沿河企業(yè)網(wǎng)站建設(shè),專(zhuān)注與做網(wǎng)站、成都做網(wǎng)站、H5開(kāi)發(fā)、小程序制作等業(yè)務(wù)。10年已為沿河眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

首先定義一個(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
  
 

最后通過(guò)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è)試，以下是完整代碼：

另外一篇文章是介紹如何將jsonContent變量中的JSON對(duì)象保存到本地文件

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。