Vue는 현재 프런트엔드 개발을 위한 가장 인기 있는 프레임워크 중 하나이며, 파일 업로드 기능을 구현하는 방식도 매우 간단하고 우아합니다. 이 글에서는 Vue에서 파일 업로드 기능을 구현하는 방법을 소개합니다.
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 메서드를 호출하여 양식의 파일 이름을 업데이트할 수 있습니다.
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() 메서드를 정의합니다.
위 코드에서는 axios 라이브러리를 사용하여 파일 업로드 작업을 완료합니다. 프런트엔드 프로젝트의 package.json 파일에 axios 종속성을 추가합니다.
"axios": "^0.19.2"
'axios'에서 axios를 가져와 사용합니다. 백엔드 API에서 Multer 라이브러리를 사용하여 파일 업로드를 처리합니다. Multer는 파일 업로드를 처리하는 Node.js 라이브러리로 파일을 처리하고 양식과 함께 보낼 수 있습니다.
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 문을 사용하여 해당 모듈을 도입하고 사용합니다.
파일 업로드 과정에서 파일 크기 제한 초과, 허용되지 않는 파일 형식, 네트워크 시간 초과, 서버 오류 및 기타 요인 등 비정상적인 상황이 발생할 수 있습니다. 해당 클라이언트와 서비스를 작성해야 합니다. 끝에 예외 처리기가 있습니다.
클라이언트 부분에서는 axios 라이브러리를 사용하기 때문에 업로드 요청에 의해 반환된 Promise 객체를 처리하기 위해 then 및 catch 메소드를 직접 사용할 수 있으며 업로드 성공 및 실패 시 작업을 각각 처리할 수 있습니다. 이 기사에 제공된 코드에서는 Promise.catch()를 사용하여 프로세스 실행 중 예외를 처리합니다. 서버 측에서는 실제 상황에 따라 다양한 예외를 다르게 처리해야 합니다.
이 기사에서는 Vue.js를 사용하여 프런트 엔드 파일 선택, 업로드 프로세스 중 진행률 표시줄의 동적 표시, 작성 등 파일 업로드 작업을 완료하는 방법을 소개했습니다. 백그라운드 API와 동시에 업로드 과정에서 발생할 수 있는 문제에 대해 발생한 Exception을 처리하였습니다.
파일 업로드 기능은 많은 웹 애플리케이션에서 없어서는 안될 기능입니다. Vue.js의 Axios 라이브러리와 Multer 라이브러리를 사용하면 간단하고 우아한 업로드 프로세스를 달성할 수 있습니다.
위 내용은 Vue에서 파일 업로드 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
