嘗試將圖像文件上傳到 imgur 時出現錯誤的請求狀態 400

Question

我正在嘗試從我的 React 應用程序上傳圖像文件。 不斷收到 400 錯誤，我不明白為什么。 這是我在 React 中的 TypeScript 函數代碼：

   public setImage = (args: ChangeEvent<HTMLInputElement>) => {

        const image = args.target.files[0];
        let formData: FormData = new FormData();
        formData.append("profileImage", image, image.name);
        const requestOptions = {
            method: 'POST',
            headers: { 'Authorization': 'Client-ID //my client-id here//' },
            image: image
        };
        fetch('https://api.imgur.com/3/image', requestOptions)
            .then(response => response.json())
            .then(data => console.log(data));

    }

和錯誤：

{
data: error: "No image data was sent to the upload api"
method: "POST"request: "/3/image"
__proto__: Objectstatus: 400
success: false
__proto__: Object
}

當我在追加后嘗試控制台我的 FormData 對象時，我可以看到一個空對象。 感謝您的任何回答！

Answer 1

首先想到的是記錄圖像對象，看看那里是否有任何問題。

另請查看此內容以驗證您是否正確記錄了 FormData 對象。

但是，如果這仍然不足以調試問題，我建議您嘗試使用 curl 或 Fiddler 之類的東西來滾動請求，因為您正在手動創建 POST 標頭。 因此，您不會發送 Content-Length 標頭，這可能會導致 imgur api 跳過整個請求正文。

要獲得內容長度，您可以執行以下操作：

    let content-length = JSON.stringify(formData).length;

     
    

然后簡單地：

const requestOptions = {
        method: 'POST',
        headers: { 'Authorization': 'Client-ID //my client-id here//', 'Content-Length': content-length },
        image: image
    };

希望這在某種程度上有用。