Example of front-end cache processing for Upload file upload in Element-UI

The function of Element-UI for file upload components focuses on file delivery to the background processing, so action is required as a required attribute.

However, if you need to read the local file and process it directly in the front end, there is no need to pass the file to the background, such as opening a JSON file locally, using the JSON file to display it dynamically in the front end, etc.

Here are some specific practices:

First, we define a jsonContent. Our goal is to convert the locally selected file into JSON to assign the value to jsonContent

Then our template file uses the combination of el-dialog and el-upload: Here the automatic upload mode of the file is stopped: auto-upload="false"

 <el-button type="primary" @click="dialogVisible = true">Load from File</el-button>
 <el-dialog title="Load JSON document from file" :="dialogVisible">
  <el-upload :file-list="uploadFiles" action="alert" :auto-upload="false" multiple :on-change="loadJsonFromFile">
   <el-button size="small" type="primary">Select a file</el-button>
   <div slot="tip">upload only jpg/png files, and less than 500kb</div>
  </el-upload>
  <span slot="footer">
   <el-button type="primary" @click="dialogVisible = false">cancel</el-button>
   <el-button type="primary" @click="loadJsonFromFileConfirmed">confirm</el-button>
  </span>
 </el-dialog>

Finally, the file in the variable uploadFiles is read and assigned to jsonContent through the filereader in html5.

if () {
    for (let i = 0; i < ; i++) {
     let file = [i]
     ()
     if (!file) continue
     let reader = new FileReader()
      = async (e) => {
      try {
       let document = ()
       (document)
      } catch (err) {
       (`load JSON document from file error: ${}`)
       (`Load JSON document from file error: ${}`, 4000)
      }
     }
     ()
    }
   }

For ease of testing, the following is the complete code:

<template>
 <div>
  <el-button type="primary" @click="dialogVisible = true">Load from File</el-button>
 <el-dialog title="Load JSON document from file" :="dialogVisible">
  <el-upload :file-list="uploadFiles" action="alert" :auto-upload="false" multiple :on-change="loadJsonFromFile">
   <el-button size="small" type="primary">Select a file</el-button>
   <div slot="tip">upload only jpg/png files, and less than 500kb</div>
  </el-upload>
  <span slot="footer">
   <el-button type="primary" @click="dialogVisible = false">cancel</el-button>
   <el-button type="primary" @click="loadJsonFromFileConfirmed">confirm</el-button>
  </span>
 </el-dialog>
</div>
 
</template>
 
<script>
export default {
 data () {
  return {
   // data for upload files
   uploadFilename: null,
   uploadFiles: [],
   dialogVisible: false
  }
 },
 methods: {
  loadJsonFromFile (file, fileList) {
    = 
    = fileList
  },
  loadJsonFromFileConfirmed () {
   ()
   if () {
    for (let i = 0; i < ; i++) {
     let file = [i]
     ()
     if (!file) continue
     let reader = new FileReader()
      = async (e) => {
      try {
       let document = ()
       (document)
      } catch (err) {
       (`load JSON document from file error: ${}`)
       (`Load JSON document from file error: ${}`, 4000)
      }
     }
     ()
    }
   }
    = false
  }
 }
}
</script>

PS: Related Reading

/zh-CN/docs/Web/API/FileReader

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.