React Native上传文件时添加Blob至FormData触发网络请求失败

我在React Native应用里做文件上传到后端的功能，发不带文件的POST请求（请求体是'hello'）时完全正常，能拿到API响应；但把Blob加到FormData里当请求体发送，就会触发TypeError: Network request failed错误。

无文件请求代码示例 #

const uploadImage = async () => {
    try {
        let formData = new FormData()
        const response = await fetch(selectedImage)
        const blob = await response.blob()
        formData.append('file', blob, 'avatar.jpg')

        let myHeaders = new Headers()
        myHeaders.append('Content-Type', 'multipart/form-data')
        myHeaders.append('authorization', '11|0oEkyFmf5TtpxPbvPCEPwju95NbZIaObXdsaJJY3')
        const uploadResponse = await fetch(process.env.EXPO_PUBLIC_API_URL + '/auth/user/update', {
            method: 'POST',
            headers: myHeaders,
            body: 'hello',
        })
        console.log(selectedImage)
    } catch (error) {
        console.log(error)
    }
}

带Blob的请求代码示例 #

const uploadImage = async () => {
    try {
        let formData = new FormData()
        const response = await fetch(selectedImage)
        const blob = await response.blob()
        formData.append('file', blob, 'avatar.jpg')

        let myHeaders = new Headers()
        myHeaders.append('Content-Type', 'multipart/form-data')
        myHeaders.append('authorization', '11|0oEkyFmf5TtpxPbvPCEPwju95NbZIaObXdsaJJY3')
        const uploadResponse = await fetch(process.env.EXPO_PUBLIC_API_URL + '/auth/user/update', {
            method: 'POST',
            headers: myHeaders,
            body: formData,
        })
        console.log(blob)
    } catch (error) {
        console.log(error)
    }
}

相关数据 #

• selectedImage值：

file:///data/user/0/com.username.appsmobile/cache/ImagePicker/713638a0-89b5-4e85-a3cb-6dbfc5448dde.jpeg

• console.log(blob)输出：

{"_data": {"__collector": {}, "blobId": "83c299f5-26df-4a32-bd05-46f96d158f2a", "lastModified": 0, "name": "713638a0-89b5-4e85-a3cb-6dbfc5448dde.jpeg", "offset": 0, "size": 479879, "type": "image/jpeg"}}

解决方法 #

1. 删除手动设置的Content-Type头 #

当fetch的请求体是FormData时，React Native会自动生成包含boundary分隔符的multipart/form-data头。手动设置该头会丢失关键的boundary信息，导致后端无法解析请求，进而触发网络错误。直接删掉这行代码：

myHeaders.append('Content-Type', 'multipart/form-data')

2. 直接用本地文件URI构造FormData（推荐） #

不需要将图片转成Blob，直接用ImagePicker返回的本地文件URI构造FormData项，这种方式在React Native环境下更稳定：

const uploadImage = async () => {
    try {
        let formData = new FormData()
        // 直接传入本地文件信息
        formData.append('file', {
            uri: selectedImage,
            name: 'avatar.jpg',
            type: 'image/jpeg'
        })

        let myHeaders = new Headers()
        myHeaders.append('authorization', '11|0oEkyFmf5TtpxPbvPCEPwju95NbZIaObXdsaJJY3')
        const uploadResponse = await fetch(process.env.EXPO_PUBLIC_API_URL + '/auth/user/update', {
            method: 'POST',
            headers: myHeaders,
            body: formData,
        })
        // 解析响应结果
        const responseData = await uploadResponse.json()
        console.log(responseData)
    } catch (error) {
        console.log(error)
    }
}

3. 检查后端配置 #

确保后端接口正确配置了multipart/form-data请求的解析支持，同时确认文件大小限制是否允许当前图片的大小（当前图片约470KB），避免因后端拒绝请求导致网络错误。

内容的提问来源于stack exchange，提问作者Kos-Mos