Vue项目通过读取本地文件内容来显示内容

最新推荐文章于 2024-04-23 16:41:07 发布

SilenceJude

最新推荐文章于 2024-04-23 16:41:07 发布

阅读量4.1w

点赞数 12

分类专栏： js Vue开发

本文链接：https://blog.csdn.net/SilenceJude/article/details/97002176

版权

Vue开发同时被 2 个专栏收录

50 篇文章 2 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

需求：

公司项目需要在登陆之前，实现客户自定义项目标题。由于还未登陆，所以肯定无法通过后端管理系统配置。
第一个想到的办法是通过读取本地文件内容，来显示标题内容。
客户需要求改标题时，直接修改本地文件内容即可。

实现

读取本地文件的思路有两种，第一种是利用XMLHttpRequest，第二种是利用input的type=file将文件先上传，再读取。

第一种：

利用XMLHttpRequest对本地文件进行读取操作，值得注意的是，HTML文档的格式要与流中的读取格式设置一致，代码如下：

methods: {
  readFile(filePath) {
    // 创建一个新的xhr对象
    let xhr = null
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest()
    } else {
      // eslint-disable-next-line
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    const okStatus = document.location.protocol === 'file' ? 0 : 200
    xhr.open('GET', filePath, false)
    xhr.overrideMimeType('text/html;charset=utf-8')
    xhr.send(null)
    return xhr.status === okStatus ? xhr.responseText : null
  },
}

首先创建一个读取文件内容的函数readFile，通过XMLHttpRequest对象，读取指定路径中的文件，格式指定为text/html,并返回内容。
然后直接在login组件的created钩子函数中，调用并读取文件内容，赋值给需要显示的标题title属性。

  created() {
    this.getList()
    this.title = this.readFile('../../../static/title.txt')
    console.log(this.title)
  },

本次项目需求就是使用此方案解决。

第二种：

上传文件利用input标签，然后使用FileReader对象，h5提供的异步api，可以读取文件中的数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <span>点击上传：</span> <input type="file" id="files1" onchange="uploadFile1()">
    <br>
    <span>点击上传2：</span> <input type="file" id="files2" onchange="uploadFile2(event)">
    <script>
      function uploadFile1() {
        const selectedFile = document.getElementById('files1').files[0]
        // 读取文件名
        const name = selectedFile.name
        // 读取文件大小
        const size = selectedFile.size
        // FileReader对象，h5提供的异步api，可以读取文件中的数据。
        const reader = new FileReader()
        // readAsText是个异步操作，只有等到onload时才能显示数据。
        reader.readAsText(selectedFile)
        reader.onload = function () {
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                console.log(this.result);
        }
      }
      function uploadFile2(e) {
        const selectedFile = e.target.files[0]
        const reader = new FileReader()
        // 文件内容载入完毕之后的回调。
        reader.onload = function(e) {
          console.log(e.target.result)
        }
        reader.readAsText(selectedFile)
      }
    </script>
  </body>
</html>

SilenceJude

关注

12
点赞
踩
47

收藏

觉得还不错? 一键收藏
12
评论
Vue项目通过读取本地文件内容来显示内容

需求：公司项目需要在登陆之前，实现客户自定义项目标题。由于还未登陆，所以肯定无法通过后端管理系统配置。第一个想到的办法是通过读取本地文件内容，来显示标题内容。客户需要求改标题时，直接修改本地文件内容即可。实现读取本地文件的思路有两种，第一种是利用XMLHttpRequest，第二种是利用input的type=file将文件先上传，再读取。第一种：利用XMLHttpRequest对本...
复制链接

扫一扫