Question

我正在使用react-dropzone将图片批量上传到我的后端。该文档说onChange函数返回一个文件数组。我将该文件数组保存到我的状态对象。 https://www.npmjs.com/package/material-ui-dropzone

通过的对象的形式为

this.state = {
  title: '',
  description: '',
  pictures: []
};

我对后端的提取调用如下

createProject = () =>  {
  let formData = new FormData();
  formData.append('title', this.state.title);
  formData.append('description', this.state.description);
  formData.append('pictures', this.state.pictures);
  fetch("http://localhost:5000/api/project/uploadProject", 
  {
    mode: 'no-cors',
    method: "POST",
    body: formData
  }).then(function (res) {
    if (res.ok) {
      alert("Perfect! ");
    } else if (res.status == 401) {
      alert("Oops! ");
    }
  }, function (e) {
    alert("Error submitting form!");
  });
}

我用Spring构建的后端的端点写为

@RequestMapping(path = "/uploadProject", method = RequestMethod.POST,
        consumes = {"multipart/form-data"})
public void uploadFile( @ModelAttribute ProjectRequest projectRequest) {

最后我的ProjectRequest模型看起来像

public class ProjectRequest {
@NotBlank
@Size(max = 140)
private String title;

@NotBlank
private String description;

@Size(max = 4)
private List<MultipartFile> pictures;

运行fetch调用时，我不断从Spring收到此错误，说我正在传递一个字符串数组，并且无法将其转换为MultipartFile数组。

已解决的[org.springframework.validation.BindException：org.springframework.validation.BeanPropertyBindingResult：1个错误字段“图片”上的对象“ projectRequest”中的字段错误：拒绝的值[]；代码[typeMismatch.projectRequest.pictures，typeMismatch.pictures，typeMismatch.java.util.List，typeMismatch]；参数[org.springframework.context.support.DefaultMessageSourceResolvable：代码[projectRequest.pictures，pictures];参数[];默认消息[图片]]；默认消息[无法将类型'java.lang.String'的属性值转换为属性'pictures'的必需类型'java.util.List'；嵌套异常为java.lang.IllegalStateException：无法将属性“ pictures [0]”的类型“ java.lang.String”的值转换为所需的类型“ org.springframework.web.multipart.MultipartFile”：没有匹配的编辑器或转换策略找到]]

我曾尝试将字符串数组硬编码到图片字段中，并设置projectRequest模型图片列表以接受字符串列表，以查看我是否将后端端点写错了，但这很好。由于某些原因，只有在我的图片参数中包含文件数组时，它才会失败。

有人知道为什么这个错误持续发生吗？

更新：因此，我发现此链接存在确切的问题： File object becomes string when pushed to an array? JS

有人知道我该如何解决吗？有一个字符串数组[目标文件]吗？

Answer 1

您可以通过这种方式发送文件数组。循环浏览文件，并将其附加在FormData中，并与ProjectRequest模型中使用的键相同。

for(let i=0; i< this.state.pictures.length; i++){
    formData.append("pictures",this.state.pictures[i]);
  }

不需要在服务器端进行任何更改。

在Spring API中，以字符串数组的形式从React应用程序发送带有文件数组的POST请求

1 个答案: