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

【问题标题】：Upload multiple images to server with part params using axio react native使用 axios react native 将多个图像上传到带有部分参数的服务器
【发布时间】：2018-12-05 09:15:44
【问题描述】：

我正在尝试使用 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
        );

这就是我试图在反应中做的事情：

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

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

【问题讨论】：

将你的 axios 配置 'Content-type': undefined 更改为 'Content-Type': 'multipart/form-data'。
现在显示"content-type missing boundary
这就是我传入 undefined 的原因
你是如何填充formDataArray的？让我看看。
photos.forEach(element => { formdata.append("parts[]", { uri: element, name: 'image.jpg', type: 'image/jpg' }) }); formdata.append('title', postTitle); formdata.append('content', postContent); formdata.append('location', locationId); formdata.append('category', categoryId); 然后用formdata 做axios post，不再是formDataArray。

标签： reactjs react-native axios image-upload

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

const data = new FormData()

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

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

【讨论】：

虽然照片是 2 个，但只上传了一个文件。
成功了。追加新文件时必须使用不同的密钥
它不应该需要使用不同的键，如果你将多个文件附加到同一个FormData键，它应该可以工作
@Vivek_Neel 你是怎么解决这个问题的？我的data 有 2 个数组，但是当我尝试在后端 php 中回显时，它只显示 1 个对象
@Vivek_Neel 在这种情况下，您需要为 2 个图像数组提供 2 个 FormData 实例