我正在使用 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 函数只能获取元消息。如何获取上传到服务器之前的文件内容并进行预览？

最佳答案

这不是元，而是文件。所以你需要在 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)
}

关于vue.js - 如何使用 vue.js 和 element-ui 的文件上传组件在上传到服务器之前预览文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56319420/