Vue是一個現代化的JavaScript框架，它允許開發者快速構建SPA（單頁應用程序）。在Vue應用中，表單是必不可少的組件之一。但在表單提交時，有時我們會遇到500錯誤（Internal Server Error）。這通常是由于我們使用了錯的數據格式或者未正確地將表單數據進行處理所導致的。

要解決這個問題，我們需要使用FormData對象。FormData對象是一個表單數據對象，它允許我們在異步請求中發送二進制數據。

const formData = new FormData();
//將表單數據附加到FormData對象上
formData.append('name', this.name);
formData.append('age', this.age);
formData.append('avatar', this.$refs.avatar.files[0]);
axios.post('/api/user', formData).then(response =>{
console.log(response.data);
}).catch(error =>{
console.log(error);
});

在這里，我們使用了axios來進行POST請求，并將FormData對象作為請求體傳遞給API。我們可以通過調用append()方法將表單數據附加到FormData對象上。例如，我們附加了一個名為“avatar”的文件，該文件是通過引用與input標簽在模板中定義的refs屬性來訪問的。

要在服務器端正確處理FormData對象，我們需要使用中間件，例如multer和body-parser。multer中間件允許我們處理文件上傳，而body-parser中間件允許我們解析HTTP請求正文，這是非常重要的。

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
const upload = multer({ dest: 'uploads/' });
app.post('/api/user', upload.single('avatar'), (req, res) =>{
console.log(req.body);
console.log(req.file);
res.send({ message: 'User created successfully' });
});
app.listen(3000, () =>{
console.log('Server started on port 3000');
});

在這個Express例子中，我們使用了multer中間件來處理文件上傳，同時使用body-parser中間件來解析HTTP請求。在這里，我們將FormData對象發送到服務器端，服務器端將收到該對象并將其解析為解析器請求體，并將其作為Express路由處理程序函數的參數。

在總結中，我們可以使用FormData對象來解決Vue表單數據提交時的500錯誤。此外，我們還必須在服務器端使用相關的中間件來正確處理二進制數據。