【问题标题】: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`);
        },
      },
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-06-25
      • 2020-01-12
      • 1970-01-01
      • 2020-10-01
      • 2014-12-19
      • 2014-06-16
      • 2015-02-27
      相关资源
      最近更新 更多