vue可以操作本地文件吗

发布时间：2023-07-08 11:30:25 所属栏目：教程来源：网络

导读： 　　这篇“vue可不可以操作本地文件”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所

　　这篇“vue可不可以操作本地文件”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue可不可以操作本地文件”文章吧。

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

　　需求：

　　公司项目需要在登陆之前，实现客户自定义项目标题。由于还未登陆，所以肯定无法通过后端管理系统配置。

　　第一个想到的办法是通过读取本地文件内容，来显示标题内容。

　　客户需要求改标题时，直接修改本地文件内容即可。

　　实现

　　读取本地文件的思路有两种，第一种是利用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对象，h6提供的异步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对象，h6提供的异步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>

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!