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

Question

我正在尝试使用带有多个参数的 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
        );

这就是我在 React 中尝试做的事情：

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))

这是 formDataArray ：

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

很遗憾，没有图像上传到服务器。

Answer 1

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

const data = new FormData()

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

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

Answer 2

const data = new FormData()

photos.forEach((element, i) => {
  const newFile = {
    uri: element, type: 'image/jpg'
  }
  data.append('files[]', newFile)
});

文档说 https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#Example

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

Upload multiple images to server with part params using axio react native

image-upload

reactjs

react-native

axios