我试图在Expo React原生项目上使用axios发送多部分请求,但在花了很多时间寻找正确的方法后,我无法使其在Android模拟器或真实设备中工作。
我的多部分由3部分组成:JSON、图像和视频。
问题是JSON,因为它只发送图像和视频,而不向formData添加JSON部分。如果我将JSON作为常规axios post(不是多部分)发送,而不发送图像或视频,它也会工作。
环境:
"expo": "~46.0.16",
"react-native": "0.69.6",
"axios": "^1.1.0",
我的源代码:
import mime from 'mime'
import * as ImagePicker from 'expo-image-picker'
import { api } from '../../authentication/infrastructure/api'
const newPost = async (props: Props) => {
const url = '/posts'
const formData = new FormData()
const info = {
title: props.title,
description: props.description,
stars: props.stars,
}
const infoJSON = JSON.stringify(info)
const infoBlob = new Blob([infoJSON], {
type: 'application/json',
})
formData.append('info', infoBlob)
const imageUri = 'file:///' + props.image?.uri.split('file:/').join('')
const imageObject = {
name: props.image.uri.split('/').pop(),
height: props.image.height,
width: props.image.width,
type: mime.getType(imageUri),
uri: imageUri,
}
const newVideoUri = 'file:///' + props.video?.uri.split('file:/').join('')
const videoObject = {
name: props.video.uri.split('/').pop(),
height: props.video.height,
width: props.video.width,
type: mime.getType(newVideoUri),
uri: newVideoUri,
}
formData.append('image', imageObject)
formData.append('video', videoObject)
const response = await api.post(url, formData, {
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
withCredentials: true,
transformRequest: (data) => data,
})
return response
}
到目前为止,我已经尝试过得:
1.将JSON作为具有content-type的blob发送(以上代码):我得到Axios“Network Error”,唯一的提示是请求中的 _response 是“Unrecognized FormData part"。我将“transformRequest”添加到axios函数,因为我在另一个堆栈溢出问题中看到它,原因是axios字符串化formData,但此解决方案对我不起作用。
1.将JSON作为字符串发送:我在stackoverflow中看到的许多解决方案都是以字符串而不是blob的形式发送的,尽管我没有收到axios错误,但现在我收到了后端错误,因为我没有发送内容类型'application-json',无法反序列化它。错误是:* 不支持内容类型八位字节流 * 因为我不发送 * 内容类型:'application/json'* 这就是我尝试使用blob方法的原因。
1.使用fetch而不是axios:相同问题
1.备注FlipperOkhttpInterceptor
:我在另一个stackoverflow问题中看到了它,因为这可能是原因,但不起作用。
1.使用多部分表单数据包中的FormData:而不是使用expo中的本机FormData,而是使用package中的FormData。不起作用。
我希望你能帮我找到一个解决方案,这将有助于所有的社区,因为这是一个非常棘手的问题,很多用户,因为你可以检查有关这个主题的社区问题。
谢谢大家!
1条答案
按热度按时间9udxz4iz1#
expo-image-picker
返回的URI是对设备内存上的视频/图像文件的引用,但不包含实际数据。您可以启用
base64
并上载生成的base64数据。