在Web開發中，圖片上傳是很常見的需求。使用Vue框架來實現圖片上傳功能也很順手。在Vue中，可以使用FormData來實現圖片上傳功能。下面我們來詳細介紹Vue中使用FormData來完成圖片上傳。

首先，在Vue中，要想實現圖片上傳功能，需要使用HTML的input標簽中的type屬性為file。這個屬性可以讓用戶選擇本地的圖片文件進行上傳。使用以下代碼來創建一個文件選擇按鈕。

<input type="file" @change="selectImg">

接下來，我們需要在Vue組件中定義selectImg方法來處理用戶選擇的圖片文件。在這個方法中，我們可以獲取用戶選擇的文件，然后使用FormData對象來將文件發送給服務器。

selectImg(event) {
const imgFile = event.target.files[0];
const formData = new FormData();
formData.append('img', imgFile);
axios.post('/upload', formData);
}

以上代碼中，我們首先通過event.target.files[0]獲取用戶選擇的圖片文件。然后，我們創建一個FormData對象并將圖片文件添加到FormData中。最后，我們使用axios.post方法將FormData發送給服務器。

除了上述代碼，我們還需要在服務器端編寫接口來處理FormData對象中的數據。在Express框架中，我們可以使用multer模塊來處理FormData中的數據，代碼如下：

const multer = require('multer');
const upload = multer({dest: 'uploads/'});
app.post('/upload', upload.single('img'), (req, res) =>{
// req.file contains uploaded file info
// do something here
});

以上代碼中，我們首先使用multer模塊來創建一個上傳文件的實例。然后，我們可以使用app.post方法來定義一個路由。在路由的處理函數中，我們使用upload.single('img')來處理上傳的文件，并將結果保存在req.file中。通過req.file，我們可以獲取上傳文件的信息，并對文件進行相應操作。

最后，需要注意一下在模板中如何顯示上傳的圖片。由于我們在前端上傳的是二進制文件，所以要正確將上傳文件顯示在前端頁面上，需要將二進制數據轉換為data URL。在Vue中，可以使用FileReader對象來實現這個功能。代碼如下：

selectImg(event) {
const fileReader = new FileReader();
const imgFile = event.target.files[0];
fileReader.readAsDataURL(imgFile);
fileReader.onload = () =>{
this.imgSrc = fileReader.result;
};
}

以上代碼中，我們首先創建一個FileReader對象。然后，我們使用readAsDataURL方法讀取用戶選擇的圖片文件。當讀取完成后，會觸發FileReader對象的onload事件，我們可以在事件處理函數中將二進制數據轉換為data URL，并將結果保存在Vue實例中的imgSrc屬性中。最后，我們可以在模板中使用img標簽來顯示上傳的圖片。

以上就是使用Vue和FormData來實現圖片上傳功能的詳細介紹。通過這個示例，我們可以學會如何在Vue中使用FormData對象來處理圖片上傳，以及如何在Express框架中使用multer模塊來處理FormData中的數據。希望本文可以幫助讀者更好地理解Vue和FormData的相關知識。