vue可以操作本地文件吗

PHP中文网 • 2025年3月11日 18:37:03 • 编程技术 • 阅读 2

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，可以读取文件中的数据。

                  Document        点击上传：     
    点击上传2：           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)      }

登录后复制推荐学习：《vue视频教程》

以上就是vue可以操作本地文件吗的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2922262.html