Vue에서 파일 업로드 기능을 구현하는 방법은 무엇입니까?

Vue는 현재 프런트엔드 개발을 위한 가장 인기 있는 프레임워크 중 하나이며, 파일 업로드 기능을 구현하는 방식도 매우 간단하고 우아합니다. 이 글에서는 Vue에서 파일 업로드 기능을 구현하는 방법을 소개합니다.

1. HTML 부분

HTML 파일에 다음 코드를 추가하여 업로드 양식을 만듭니다.

<template>
  <div>
    <form ref="uploadForm" 
          enctype="multipart/form-data" 
          class="upload-form" 
          @submit.prevent="submitFile">
      <input type="file" 
             name="file" 
             id="file" 
             class="input-file"
             ref="file"
             @change="handleFileChange" />
      <label for="file" class="btn">选择文件</label>
      <!-- 进度条展示 -->
      <p v-if="showProgress">上传进度：{{ percent }} %</p>
      <button type="submit" 
              class="upload-btn" 
              :disabled="!selectedFile">上传</button>
    </form>
  </div>
</template>

위 코드에서 양식 및 입력 태그를 사용하여 업로드 양식을 만듭니다. 업로드 양식의 이름 속성은 양식에 있는 파일의 필드 이름을 지정합니다. enctype 속성은 업로드할 파일 유형을 나타냅니다. 여기서는 multipart/form-data 유형이 사용됩니다.

레이블 태그의 @click.prevent 이벤트를 사용하면 입력 태그의 클릭 이벤트가 트리거되어 파일 선택 상자가 팝업됩니다. 여기의 @change 이벤트는 파일 선택을 수신하고 handlerFileChange 메서드를 호출하여 양식의 파일 이름을 업데이트할 수 있습니다.

2. JavaScript 부분

JavaScript 파일에서는 Vue.js의 사용자 정의 구성 요소와 axios 라이브러리를 사용하여 파일 업로드를 구현해야 합니다.

<script>
import axios from 'axios';

export default {
  data () {
    return {
      selectedFile: null,  // 选中的文件
      showProgress: false,  // 是否展示上传进度条
      percent: 0,    // 上传进度百分比
    }
  },
  methods: {
    handleFileChange (event) {
      this.selectedFile = event.target.files[0];
    },
    submitFile () {
      if (!this.selectedFile) return;
      // 新建 from 对象
      const formData = new FormData();
      formData.append('file', this.selectedFile, this.selectedFile.name);

      this.showProgress = true;
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          // 计算上传进度百分比
          this.percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      };
      axios.post('/api/upload', formData, config)
        .then((response) => {
          console.log(response);
          this.showProgress = false;  // 移除 progress 条
        })
        .catch((error) => {
          console.log(error);
          this.showProgress = false;
        });
    },
  },
};
</script>

파일 선택 및 업로드를 처리하는 메서드에서 handlerFileChange() 및 submitFile() 메서드를 정의합니다.

• handleFileChange 메서드는 파일 선택 이벤트를 수신하고 선택한 파일을 저장합니다.
• submitFile 메소드는 선택한 파일이 존재하는지 확인하고 존재하지 않으면 직접 반환합니다. new FormData()를 사용하여 양식을 구성하고 Append 메소드를 통해 선택한 파일을 양식에 추가합니다. 세 번째 매개변수는 파일 이름입니다. axios.post는 문자열 매개변수를 통해 파일을 업로드하기 위한 API를 지정합니다. 업로드를 위해 요청된 데이터는 헤더의 Content-Type 속성이 여기에서 사용되며 업로드는 다음과 같습니다. 진행률 표시줄을 동적으로 표시하기 위해 onUploadProgress 이벤트를 통해 진행 상황을 모니터링합니다.

위 코드에서는 axios 라이브러리를 사용하여 파일 업로드 작업을 완료합니다. 프런트엔드 프로젝트의 package.json 파일에 axios 종속성을 추가합니다.

"axios": "^0.19.2"

'axios'에서 axios를 가져와 사용합니다. 백엔드 API에서 Multer 라이브러리를 사용하여 파일 업로드를 처리합니다. Multer는 파일 업로드를 처리하는 Node.js 라이브러리로 파일을 처리하고 양식과 함께 보낼 수 있습니다.

3. 백엔드 API 부분

const express = require('express');
const multer = require('multer');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    const error = new Error('Please upload a file');
    error.httpStatusCode = 400;
    return next(error);
  }
  // 文件重命名
  const oldPath = file.path;
  const newPath = 'uploads/' + file.originalname;
  fs.rename(oldPath, newPath, (err) => {
    if (err) {
      console.error(err);
    }
  });
  res.send('File uploaded successfully');
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

은 Multer의 단일 방법을 통해 업로드된 파일의 필드 이름을 지정합니다. Multer는 다중 파일 업로드 및 파일 형식 제한을 위한 다른 방법도 제공합니다. 업로드가 완료되면 파일을 초기 경로에서 업로드 디렉터리로 이동합니다. 파일 이름 바꾸기 작업을 통해 이름을 고유하게 만들고 다른 파일 이름을 업로드하여 덮어쓰는 것을 방지할 수 있습니다.

위 코드에서는 Express 라이브러리를 사용하여 Node.js 서버 애플리케이션을 만들었습니다. 백그라운드 프로젝트의 package.json 파일에 다음 종속성을 추가합니다.

"express": "^4.17.1",
"multer": "^1.4.2"

import / require 문을 사용하여 해당 모듈을 도입하고 사용합니다.

4. 예외 처리

파일 업로드 과정에서 파일 크기 제한 초과, 허용되지 않는 파일 형식, 네트워크 시간 초과, 서버 오류 및 기타 요인 등 비정상적인 상황이 발생할 수 있습니다. 해당 클라이언트와 서비스를 작성해야 합니다. 끝에 예외 처리기가 있습니다.

클라이언트 부분에서는 axios 라이브러리를 사용하기 때문에 업로드 요청에 의해 반환된 Promise 객체를 처리하기 위해 then 및 catch 메소드를 직접 사용할 수 있으며 업로드 성공 및 실패 시 작업을 각각 처리할 수 있습니다. 이 기사에 제공된 코드에서는 Promise.catch()를 사용하여 프로세스 실행 중 예외를 처리합니다. 서버 측에서는 실제 상황에 따라 다양한 예외를 다르게 처리해야 합니다.

5. 요약

이 기사에서는 Vue.js를 사용하여 프런트 엔드 파일 선택, 업로드 프로세스 중 진행률 표시줄의 동적 표시, 작성 등 파일 업로드 작업을 완료하는 방법을 소개했습니다. 백그라운드 API와 동시에 업로드 과정에서 발생할 수 있는 문제에 대해 발생한 Exception을 처리하였습니다.

파일 업로드 기능은 많은 웹 애플리케이션에서 없어서는 안될 기능입니다. Vue.js의 Axios 라이브러리와 Multer 라이브러리를 사용하면 간단하고 우아한 업로드 프로세스를 달성할 수 있습니다.

위 내용은 Vue에서 파일 업로드 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!