vue可不可以操作本地文件

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

创新互联公司基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业服务器托管报价，主机托管价格性价比高，为金融证券行业移动服务器托管，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。

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>

以上就是关于“vue可不可以操作本地文件”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。

网页标题：vue可不可以操作本地文件
地址分享：https://www.cdcxhl.com/article38/jjogsp.html

成都网站建设公司_创新互联，为您提供ChatGPT、品牌网站制作、网站策划、网站导航、移动网站建设、建站公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容