Skip to content

文件上传 upload FIleReader() #17

@1StepEngineer

Description

@1StepEngineer

获取上传文件内容

<input type='file' id="file" @change="getFile()"/>
getFile(){    
      var reader = new FileReader();
      var file = document.getElementById("file").files[0]   //获取文件对象
      reader.readAsText(file)    //获取文件内容
      reader.onload = function(oFREvent){     //读取完毕从中取值
        var pointsTxt = oFREvent.target.result;
        console.log(pointsTxt)       // 读取文件内容
      }
  }

vue element获取上传文件内容

<el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
handlePreview(file) {
        var reader = new FileReader();
        var file = file.raw   //vue组件获取到的file对象
        reader.readAsText(file)
        reader.onload = function(oFREvent){//读取完毕从中取值
          var pointsTxt = oFREvent.target.result;
          console.log(pointsTxt)
        }
          console.log(file);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions