無法使用 ReactJS 中的 axios 將多部分表單數據發送到后端

Question

我正在嘗試調試此 ReactJS 代碼，無論我嘗試什么，后端都不會在正文中收到任何數據並且文件未定義。 我通過打印所有數據（用戶和 element.files[0]）直到 axios 請求之前的行進行檢查，一切似乎都工作正常。

就在請求到達后端時，數據不顯示。

部分js代碼：

    async function updateAvatar(element) {
        let data = new FormData();
        // `user` is an object that exists as a state 
        data.append('user', user);
        data.append('file', element.files[0])
        const response = await axios.post(`http://localhost:3001/user/upload_avatar`, data, {
            headers: { "Content-Type": "multipart/form-data" }
        });
    }

部分 HTML 代碼：

<label htmlFor='update-avatar'><span className='btn btn-outline-primary'>Update</span></label>
<input id='update-avatar' type={'file'} className='custom-file-upload' onChange={e => updateAvatar(e.target)} />

該代碼一直工作到昨天，並且從今天開始沒有正確發送數據。

有人看到代碼有任何問題嗎？

Answer 1

解決方案非常簡單。 我在前端 FormData() 和后端 multer 代碼（ user_name ）中的變量名（ user ）有所不同。 這導致了這個問題。 通過將 multer 中的變量名稱更改為用戶，請求可以正常工作。

Answer 2

我以前遇到過這個問題。 您是否嘗試過任何庫來處理從請求中收到的數據？ 比如強大的或者multer 。