Vue에서 파일 내용을 읽는 방법

藏色散人
풀어 주다: 2023-01-13 00:45:24
원래의
16474명이 탐색했습니다.

vue读取文件内容的方法:1、创建一个test.properties测试内容;2、通过“readTestFile(){const file = this.loadFile('test.properties')...}”方法读取文件内容即可。

Vue에서 파일 내용을 읽는 방법

本文操作环境:windows7系统、vue/cli 4.3.1&&ultimate 2019.1&&nodev12.16.2版,DELL G3电脑。

观前提示:

本文所使用的IDEA版本为ultimate 2019.1,node版本为v12.16.2,vue版本为@vue/cli 4.3.1。

在项目开发过程中,需要在vue前端读取配置等文件。

1.实例

我的本地文件放在vue项目中的public文件夹中

Vue에서 파일 내용을 읽는 방법

test.properties

content=测试内容
로그인 후 복사

vue文件中读取文件内容

// 读取test.properties
readTestFile() {
  const file = this.loadFile('test.properties')
  console.info(file)
  console.log(this.unicodeToUtf8(file))},
  // 读取文件
  loadFile(name) {
  const xhr = new XMLHttpRequest()
  const okStatus = document.location.protocol === 'file:' ? 0 : 200
  xhr.open('GET', name, false)
  xhr.overrideMimeType('text/html;charset=utf-8')
  // 默认为utf-8
  xhr.send(null)
  return xhr.status === okStatus ? xhr.responseText : null},
  // unicode转utf-8
  unicodeToUtf8(data) {
  data = data.replace(/\\/g, '%')
  return unescape(data)}
로그인 후 복사

运行结果如下
Vue에서 파일 내용을 읽는 방법

2.可能遇到的问题

2.1.解析的文件乱码

读取文件的方法,以utf-8形式读取文件,建议修改文件格式保存为utf-8编码,或者改变读取格式

xhr.overrideMimeType('text/html;charset=utf-8')
// 默认为utf-8
로그인 후 복사

2.2.读取中文为unicode编码

由于properties存储中文为unicode编码,需要在后台,或者前端处理一下

// unicode转utf-8
unicodeToUtf8(data) {
  data = data.replace(/\\/g, '%')
  return unescape(data)}
로그인 후 복사

相关推荐:《vue.js教程

위 내용은 Vue에서 파일 내용을 읽는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
vue
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿