在Web開發中，經常需要實現圖片的上傳功能，使用戶可以在應用程序中輕松地上傳和共享他們的照片或圖像。Node.js是一個流行的服務器端JavaScript平臺，而Vue.js則是一種流行的JavaScript框架，它們都可以輕松地實現圖片上傳功能。

使用Node.js的文件系統模塊，可以方便地讀取和寫入文件。與此同時，Vue.js提供了File API，可用于文件的選擇和上傳。下面將詳細介紹如何使用Vue.js和Node.js創建文件上傳功能。

Vue.js實現文件上傳

在上面的代碼中，我們提供了一個文件選擇框，當用戶選擇了文件后，我們使用File API將文件賦值給列表中的selectedFile變量。當用戶點擊Upload按鈕時，我們將文件通過FormData對象發送到Node.js服務器端。formData.append()方法添加的'iamge'參數告訴Node.js我們發送的是一張圖片。最后，我們使用axios進行HTTP請求，將formData對象上傳到服務器端。

Node.js實現圖片上傳

const express = require('express');
const multer = require('multer');
const app = express();
// 上傳文件的存儲位置
const storage = multer.diskStorage({
destination: (req, file, callback) =>{
callback(null, 'uploads');
},
filename: (req, file, callback) =>{
callback(null, `${Date.now()}_${file.originalname}`);
}
});
// 創建一個multer實例
const upload = multer({ storage }).single('image');
app.post('/api/upload', (req, res) =>{
upload(req, res, (err) =>{
if (err) {
console.error(err);
return res.status(500).json({ error: '上傳失敗！' });
}
return res.status(200).json({ filepath: req.file.path });
});
});
app.listen(3000, () =>{
console.log('服務器已啟動...');
});

在上面的Node.js代碼中，我們使用multer庫來處理上傳文件。使用multer.diskStorage方法指定將文件保存到'uploads'目錄中。在存儲時，我們使用了Date.now()和file.originalname以確保每個文件都具有唯一的名稱。隨后，我們使用multer.single()方法只處理一張圖像文件上傳。當上傳成功后，我們將文件路徑作為JSON響應傳回客戶端。

總結

這篇文章詳細地介紹了如何使用Vue.js和Node.js實現一項重要的Web開發任務，即上傳文件。我們在Vue.js中使用了File API將文件發送到Node.js，而在Node.js中使用了multer庫來處理上傳文件的存儲。Vue.js和Node.js提供的工具可輕松實現文件上傳功能，我們應該在實現其他功能時更好地利用他們。