cannot send FormData in `$fetch` body

Environment

Operating System: Windows 10 Node Version: v14.16.1 Nuxt Version: 3.0.0-rc.08 Builder: vite Runtime Modules: - Build Modules: -

Reproduction

• Create a new nuxt3 project ( doesn’t matter if you are using rc10 )
• Create a new simple component to upload an image
• Put in the component an input type file like as follows : <input type="file" id="file-input" multiple @change="onInputChange" />
• Add a script tag and create a new method onInputChange like this : onInputChange (e) { const file = e.target.files await $fetch('/api/uploadFile', { method: "POST", body: { files: file }, headers : { "Content-Type": "multipart/form-data" } }) }
• After that create a new ssr api in the server/api directory like this :

import FormData from “form-data”; import { manageErrorServer } from “~~/utils/manageErrorServer”; export default defineEventHandler(async (event) => { const config = useRuntimeConfig(); const body = await useBody(event); try{ const res: Record<string, any> = await $fetch( ${config.API_BASE_URL}+“smart-product”,{ method: ‘POST’, body: body, headers: { “Content-Type”: “mutlipart/form-data” } } ) return res } catch (e) { console.log("erreur " + e.response) manageErrorServer(e); } });

Describe the bug

The multipart/form-data is not sent by $fetch, either on the first call to the ssr api or on the second call to the backend

Additional context

No response

Logs

No response

[tak-ho]

Me too, its not working for me, I raise another issue about posting file fail using FormData with ofetch https://github.com/unjs/ofetch/issues/186

[lenimbugua]

Similar issue, if anyone knows a workaround without needing to install axios please.