Vue CLI 是一個官方的 Vue.js 命令行工具，它可以幫助我們快速構建 Vue.js 應用程序。它集成了許多常用的庫和工具，例如 Webpack、Babel、ESLint、Sass、Less 等，讓我們在開發(fā)過程中更加高效和方便。

Vue CLI 支持文件上傳功能。文件上傳指的是將本地文件傳輸?shù)椒掌骰蛟拼鎯Ψ铡榱藢崿F(xiàn)文件上傳，我們通常使用 AJAX 或表單 POST 提交的方式。Vue CLI 結合了 axios（一個基于 Promise 的 HTTP 庫）和 FormData 對象（用于構建表單數(shù)據(jù)）來處理文件上傳請求。

import axios from 'axios';
export default {
methods: {
handleFileUpload() {
let formData = new FormData();
let file = this.$refs.fileInput.files[0];
formData.append('file', file);
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response =>{
console.log(response);
});
}
}
}

上面的代碼演示了如何處理文件上傳請求。首先需要創(chuàng)建一個 FormData 對象，然后獲取用戶選擇的文件并將其添加到 FormData 中。接下來使用 axios 發(fā)送 POST 請求，將 FormData 對象作為請求體發(fā)送到服務器。注意要設置請求頭的 Content-Type 為 multipart/form-data，這是告訴服務器請求體是一個 multipart/form-data 表單，包含了文件和其他數(shù)據(jù)。

在服務器端，我們需要使用一個后端框架或庫來處理文件上傳請求。在 Node.js 中，我們可以使用 multer（一個 Node.js 中間件，用于處理 multipart/form-data 表單數(shù)據(jù)）來處理文件上傳請求。

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();
app.post('/api/upload', upload.single('file'), (req, res) =>{
console.log(req.file);
res.send('File uploaded successfully');
});
app.listen(3000, () =>{
console.log('Server started on port 3000');
})

上面的代碼演示了如何在 Node.js 中使用 multer 來處理文件上傳請求。multer 的 dest 選項指定文件上傳時的存儲路徑。使用 upload.single 方法來處理單個文件上傳請求。在處理完畢后，我們可以通過 req.file 屬性來訪問上傳的文件信息。最后通過 res.send 方法返回響應結果。

文件上傳功能對于許多 Web 應用程序來說是一個必要的功能，Vue CLI 提供了非常方便的解決方案，使用 axios 和 FormData 來構建文件上傳請求。在服務器端，我們可以使用 multer 或其他適合的庫來處理文件上傳請求。