瀏覽器不會使用 Fetch 自動為 FormData 設置請求內容類型標頭

Question

我正在嘗試使用 FormData 上傳文件，但服務器未收到數據。

繼將內容類型標頭設置為 multipart/form-data 覆蓋包含“邊界”的所需格式的一些帖子和博客之后，我刪除了內容類型標頭，假設我的瀏覽器將處理請求內容類型標頭。 網絡上充斥着這種 formdata 解決方案，但我找不到任何瀏覽器在使用 FormData 時不會自動設置內容類型的情況。 我的服務器工作正常，因為我能夠成功發布來自 REST 客戶端的請求。

這是我的 API 調用：

const data = new FormData()
data.append('file', this.state.selectedFile)

const result = await fetch("http://localhost:3000/uploadResume", {
            method: "POST",
            headers: {
                "Authorization": `Bearer ${localStorage.getItem('user_token')}`
            },
            data: data
        })

這些是瀏覽器 (Google Chrome) 設置的請求標頭：

是否有我遺漏的瀏覽器設置，或我忽略的其他潛在問題？

解決了我錯誤地將數據集稱為“數據”而不是“正文”的 API。

Answer 1

Request 對象需要一個body屬性

    fetch(url, {
        // data: data <-- wrong
        body: data // <-- correct
    })

---

題外話

根據您發送的少量數據（只有一個字段/文件）判斷，您可以簡單地將數據作為原始字節發布而不是將其作為 FormData（使服務器更容易將數據通過管道傳輸到一個文件並且不必處理任何formdata算法）+您在接收文件時會事先知道文件有多大。

    fetch(url, {
        body: this.state.selectedFile
    })

所有的doe，您丟失了文件名，但也許您可以將其粘貼在某個x-filename 標頭中