vue가 로컬 파일을 작동할 수 있나요?

vue는 로컬 파일을 작동할 수 있습니다. 1. "XMLHttpRequest"를 사용하여 로컬 파일을 읽습니다. 2. "input" 태그를 사용하여 파일을 업로드한 다음 "FileReader" 개체와 비동기 API를 사용하여 읽습니다. 파일.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue 버전 3, Dell G3 컴퓨터.

vue가 로컬 파일을 작동할 수 있나요?

알겠습니다.

Vue 프로젝트는 로컬 파일 콘텐츠를 읽어 콘텐츠를 표시합니다

요구 사항:

회사 프로젝트는 로그인하기 전에 고객이 정의한 프로젝트 제목을 구현해야 합니다. 아직 로그인하지 않았으므로 백엔드 관리 시스템을 통해 구성할 수는 없습니다.
가장 먼저 떠오르는 방법은 로컬 파일 내용을 읽어 제목 내용을 표시하는 것입니다.
고객이 제목을 변경해야 하는 경우 로컬 파일의 내용을 직접 수정할 수 있습니다.

---

로컬 파일 읽기를 구현하는 방법에는 두 가지가 있습니다. 첫 번째는 XMLHttpRequest를 사용하는 것이고, 두 번째는 입력 유형=파일을 사용하여 파일을 먼저 업로드한 다음 읽는 것입니다.

첫 번째: 로컬 파일을 읽으려면 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
  },}

First create a read 파일 내용을 가져오는 readFile 함수는 XMLHttpRequest 객체를 통해 지정된 경로의 파일을 읽고 형식은 text/html로 지정하여 내용을 반환합니다.

그런 다음 로그인 컴포넌트의 생성된 Hook 함수에서 파일 내용을 직접 호출하여 읽고 표시해야 하는 제목 속성에 할당합니다.

  created() {
    this.getList()
    this.title = this.readFile('../../../static/title.txt')
    console.log(this.title)
  },

이 솔루션을 사용하면 이 프로젝트의 요구 사항이 해결됩니다.

---

두 번째: input 태그를 사용하여 파일을 업로드한 후 h5에서 제공하는 비동기 API인 FileReader 개체를 사용하여 파일의 데이터를 읽습니다.

아아아아 추천 학습: "

vue 비디오 튜토리얼

"

위 내용은 vue가 로컬 파일을 작동할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!