问如何使用vue.js & element-ui的文件上传组件在上传到服务器前预览文件？

EN

handlePreview(file) {
  const reader = new FileReader()

  reader.onload = e => console.log(e.target.result) // here is the result you can work with.

  reader.readAsText(file)
}

<el-upload class="upload-box" drag action="" :auto-upload="false" :on-change="handleImport" :on-preview="handlePreview" :limit="1" :on-exceed="handleExceed">
<i class="el-icon-upload"></i>
<div class="el-upload__text">Drop file here or <em>click to upload</em></div>
<div class="el-upload__tip" slot="tip">Single JSON file with size less than 500kb</div>
</el-upload>

export default {
  data() {
    return {
      uploadFile: null,
      fileContent: null,
    }
  },
  methods: {
    handleImport(file) {
      this.uploadFile = file
      let reader = new FileReader()
      reader.readAsText(this.uploadFile.raw)
      reader.onload = async (e) => {
        try {
          this.fileContent = JSON.parse(e.target.result)
        } catch (err) {
          console.log(`Load JSON file error: ${err.message}`)
        }
      }
    },
    handlePreview() {
      let myWindow = window.open();
      myWindow.document.write(JSON.stringify(this.fileContent));
      myWindow.document.close();
    },
    handleExceed(files, fileList) {
      this.$message.warning(`The limit is 1, you selected ${files.length + fileList.length} totally, please first remove the unwanted file`);
    },
  },
}