本教程操作环境：windows10系统、Vue 3版、Dell G3电脑。vue可以操作本地文件吗？可以。Vue项目通过读取本地文件内容来显示内容需求：公司项目需要在登陆之前，实现客户自定义项目标题。由于还未登陆，所以肯定无法通过后端管理系
本教程操作环境：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可以操作本地文件吗的详细内容，更多请关注编程网其它相关文章！
--结束END--
本文标题: vue可以操作本地文件吗
本文链接: https://www.lsjlt.com/news/206677.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0