使用 axio react native 将带有部分参数的多个图像上传到服务器

Viv*_*eel 1 image-upload reactjs react-native axios

我正在尝试使用带有多个参数作为请求正文的 axio 将多个图像上传到服务器。基本上下面是本机android中的请求,它试图在本机反应中做到这一点。

@Headers(HTTPService.NEEDS_AUTH_HEADER)
        @Multipart
        @POST("/api/post")
        Call<Post> create(
                @Part("title") RequestBody title,
                @Part("content") RequestBody content,
                @Part("location") RequestBody location,
                @Part("category") RequestBody category,
                @Part("captions") List<RequestBody> captions,
                @Part List<MultipartBody.Part> parts
        );
Run Code Online (Sandbox Code Playgroud)

这就是我试图做的反应:

const config = {
      method: 'post',
      headers: {
        'NEEDS_AUTH': true,
        Accept: 'application/json',
        'Content-type': undefined

      },
      formDataArray,
      url: PATH_API_CREATE_POST,
      data: {
        title: postTitle,
        content: postContent,
        location: locationId,
        category: categoryId,

      }
    }

    axios(config).then(res => console.log('create post ', res)).catch(err => console.log('create post err', err.response)) 
Run Code Online (Sandbox Code Playgroud)

这是 formDataArray :

photos.forEach(element => { let formdata = new FormData(); formdata.append("upload", { uri: element, name: 'image.jpg', type: 'image/jpg' }) formDataArray.push(formdata) });

不幸的是,没有图像上传到服务器。

mxd*_*9i7 7

假设您的photos数组包含上传照片的文件系统路径数组,您的 FormData 应该像这样循环:

const data = new FormData()

photos.forEach((element, i) => {
  const newFile = {
    uri: element, type: 'image/jpg'
  }
  data.append('files', newFile)
});
Run Code Online (Sandbox Code Playgroud)

然后您可以将此变量附加data到您的发布请求以将文件数组上传到服务器。