js读取JSON文件获取数据

Web_Lys

于 2020-03-03 15:11:41 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue js 文章标签： vue javascript json js

本文链接：https://blog.csdn.net/lys20000913/article/details/104633012

Vue 同时被 2 个专栏收录

47 篇文章

订阅专栏

37 篇文章

订阅专栏

本文介绍了一种使用El-upload组件实现JSON文件上传的方法，并详细解释了如何在上传前预览JSON文件的内容。通过利用window.createObjectURL和Axios，可以在不离开页面的情况下预览文件，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


  <div id='search'> 
    <el-upload 
      :multiple="false"
      :show-file-list="false"
      //:on-success="handleImageSuccess" //上传成功后出发
      :before-upload="handleBeforeUpload"//上传前钩子函数
      accept=".json"
      class="image-uploader" 
      action="上传文件路径"
    > 
      <div class="el-upload__text">
        <el-button type="primary">点击上传</el-button> 
      </div>
    </el-upload>
  </div>

//上传前钩子函数
 handleBeforeUpload(file) {
    let url = null;
    if(window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file);
    } else if(window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if(window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    //利用Axios读取JSON数据
    this.$axios.get(url).then(res=>{
      console.log(res)//读取文件内容
    }).catch(err=>{
		throw err
	})
}