• 技术文章 >web前端 >前端问答

    vue可以操作本地文件吗

    藏色散人藏色散人2023-01-05 15:45:33原创109

    vue可以操作本地文件,其操作方法是:1、利用“XMLHttpRequest”对本地文件进行读取操作;2、利用“input”标签上传文件,然后使用“FileReader”对象和异步api,读取文件中的数据。

    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。

    vue可以操作本地文件吗?

    可以。

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

    需求:

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


    实现

    读取本地文件的思路有两种,第一种是利用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>
    推荐学习:《vue视频教程

    以上就是vue可以操作本地文件吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue
    上一篇:vue有没有冒号 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • vue怎么修改父组件值• vue打包刷新报错怎么办• 【整理汇总】45+个Vue面试题,带你巩固知识点!• vue不刷新当前页面怎么办• vue能显示源码吗
    1/1

    PHP中文网