在Expo React Native中使用axios发送JSON和包含多部分的文件(图像和视频)

oxf4rvwz  于 2022-11-30  发布在  React
关注(0)|答案(1)|浏览(158)

我试图在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。不起作用。
我希望你能帮我找到一个解决方案,这将有助于所有的社区,因为这是一个非常棘手的问题,很多用户,因为你可以检查有关这个主题的社区问题。
谢谢大家!

9udxz4iz

9udxz4iz1#

expo-image-picker返回的URI是对设备内存上的视频/图像文件的引用,但不包含实际数据。
您可以启用base64并上载生成的base64数据。

相关问题