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>如上程式碼中，使用form 和input 標籤來創建上傳表單。上傳表單中的 name 屬性指定表單中檔案的欄位名稱。 enctype 屬性表示要上傳的檔案的類型，這裡使用了 multipart/form-data 類型。
在 label 標籤中透過 @click.prevent 事件來觸發 input 標籤的點擊事件，從而彈出檔案選擇框。這裡的 @change 事件可以監聽到檔案選擇並且呼叫 handleFileChange 方法來更新表單中的檔案名稱。
在 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>在 methods 中定義 handleFileChange()、submitFile() 方法處理檔案選擇和上傳：
在上述程式碼中，我們使用了 axios 函式庫完成檔案上傳操作。在前端工程的 package.json 檔案中加入 axios 的依賴：
"axios": "^0.19.2"
透過 import axios from 'axios'; 引入並使用。在後台 API 中，使用 Multer 函式庫來處理檔案上傳。 Multer 是一個處理檔案上傳的 Node.js 函式庫，Multer 可以處理檔案並跟隨表單一起傳送。
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 的single 方法指定了上傳檔案的欄位名，同時Multer 也提供了其他方法進行多檔案上傳和檔案類型限制等操作。我們在上傳完成後會把檔案從初始路徑移到 uploads 目錄中，檔案重新命名操作可以讓名稱唯一避免不同檔案名稱上傳覆蓋。
在上述程式碼中，我們使用了 express 函式庫來建立 Node.js 伺服器應用程式。在後台工程中 package.json 檔案中加入以下依賴：
"express": "^4.17.1", "multer": "^1.4.2"
使用 import / require 語句引入並使用對應模組即可。
在檔案上傳過程中，可能會出現異常狀況，例如檔案大小超限、檔案類型不允許、網路逾時和服務端錯誤等多種因素，我們需要編寫客戶端和服務端對應的異常狀況處理程序。
在客戶端部分，由於我們使用了 axios 庫，可以直接使用 then 和 catch 方法處理上傳請求返回的 Promise 對象，分別處理上傳成功和失敗時的操作。在本文所提供的程式碼中，我們使用了 Promise.catch() 來處理流程執行過程中的例外狀況。在伺服器端，不同的異常情況需要根據實際情況進行不同的處理。
在本文中，我們介紹如何使用Vue.js 完成檔案上傳操作，包括前端檔案選擇和上傳過程中的進度條動態展示，以及後台APIs 的編寫，同時對上傳過程中可能出現的異常情況進行了處理。
檔案上傳功能是許多 Web 應用程式中不可或缺的一個功能，在 Vue.js 中使用 axios 函式庫和 Multer 函式庫可實現簡單而優雅的上傳流程。
以上是Vue 中如何實作檔案上傳功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
