Question

我正在尝试使用带有多个参数的axio作为请求正文将多个图像上传到服务器。基本上，下面是原生android中的请求，它试图在react native中执行此请求。

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

这就是在反应中要做的事情：

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附加到您的发布请求中，以将文件数组上传到服务器。

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

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

2 个答案: