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

【问题标题】：How to preview files before uploaded to server by using file-upload component of vue.js & element-ui?如何使用 vue.js 和 element-ui 的文件上传组件在上传到服务器之前预览文件？
【发布时间】：2019-10-12 15:17:30
【问题描述】：

我正在使用 vue.js 和 element-ui 来上传文件和预览文件。我想在上传到服务器之前预览文件（.pdf/.docx/.jpg...）。

 <el-upload
          ref="uploadFile"
          :on-change="onUploadChange"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :file-list="fileList"
          :http-request="handleUpload"
          :data="extendData"
          :auto-upload="false"
          class="upload-demo"
          drag
          action="uploadUrl"
          multiple>
          <i class="el-icon-upload"/>
          <div class="el-upload__text">drag here, or <em>click to upload</em></div>
 </el-upload>

只有 on-change 函数可以获取文件的内容，而 on-preview 函数只能获取元消息。如何获取文件内容并预览上传到服务器之前的文件内容？

【问题讨论】：

标签： vue.js element-ui

【解决方案1】：

不是meta，而是文件。所以你需要在file上使用FileReader：

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)
}

【讨论】：

我收到错误消息：TypeError: reader.readFile 在运行代码时不是函数。我将'reader.readFile（）'更改为'reader.readAsText（file，'gbk'）'，但仍然有一些错误：无法在'FileReader'上执行'readAsText'：参数1不是'Blob'类型'。有什么建议吗？
我找到了解决这个问题的办法——在onUploadChange函数中将文件对象保存在一个变量中，我可以从变量中获取文件对象。

【解决方案2】：

我也在使用 Element-UI 上传框，下面的代码允许用户将 JSON 文件导入 Vue，并在单击文件名时在新窗口中预览其内容。该文件在on-change期间被读取并作为对象存储在data中，然后

Vue 组件：

<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`);
    },
  },
}

【讨论】：