在前端開發過程中，我們經常需要上傳文件，并且可以同時上傳一些元數據信息。一種常用的方案是使用 Form Data 來上傳文件和附加的信息，其中附加信息可以是 JSON 格式。

下面是一個例子，我們通過 form 表單來上傳一個文件和一個 JSON 數據：

<form enctype="multipart/form-data" action="upload.php" method="POST">
<p>選擇文件：</p>
<input type="file" name="file" />
<p>附加信息：</p>
<textarea name="metadata">{"name":"test","type":"image/png"}</textarea>
<p><input type="submit" value="上傳"></p>
</form>

在提交表單時，瀏覽器會將文件和附加信息一同打包成一個 Form Data 對象，在 HTTP 請求中發送給服務器。服務器端可以通過解析 Form Data 對象來獲取上傳的文件和元數據信息。

如果使用 XMLHttpRequest 直接上傳文件，也可以通過設置請求頭（Content-Type）為 multipart/form-data，再將文件和 JSON 數據放在請求體中一并上傳，底層也是將它們打包成一個 Form Data 對象。

const xhr = new XMLHttpRequest()
xhr.open('POST', '/upload')
const formData = new FormData()
formData.append('file', file)
formData.append('metadata', JSON.stringify({name: 'test', type: 'image/png'}))
xhr.send(formData)

在后端解析 Form Data 對象時，可以使用一些中間件或框架，如 Express 的 multer，來處理文件上傳和解析附加信息中的 JSON 數據。