Question

我尝试使用包含文件和Json对象的表单数据发布请求。

要执行此操作，我将内容类型设置为未定义，根据以下帖子 https://stackoverflow.com/a/25183266/4573767

这会导致浏览器将Content-Type设置为multipart / form-data 并正确填补边界。

但是，在（springboot）服务器端，我收到此错误消息：

由Handler执行导致的已解决异常： org.springframework.web.HttpMediaTypeNotSupportedException：无效 mime type＆＃34; undefined＆＃34;：不包含＆＃39; /＆＃39;

所以，似乎＆＃34;未定义＆＃34;浏览器未正确管理内容类型。

这是客户端的fetch命令：

    // My document blob
    var documentBlob = new Blob([JSON.stringify({ documentName: "toto" })], {
      type: "application/json"
    });

    // My Form data containing a file and the document blob
    var formData = new FormData();
    formData.append("file", this.state.file);
    formData.append("document", documentBlob);

    // Fetch command
    fetch("/document/", {
      method: "POST",
      headers: {
        "Content-Type": undefined
      },
      data: formData
    }).then(function(response) {
      console.log("response!");
    });

这是服务器端（弹簧引导控制器）：

@RestController
@RequestMapping("/document")
public class DocumentController {

    @Autowired
    private DocumentRepository documentRepository;  

    @RequestMapping(value = "/", method = RequestMethod.POST, consumes = { "multipart/form-data" })
    public boolean addDocument(@RequestPart("document") Document document, @RequestPart("file") MultipartFile file) {
        documentRepository.save(document);
        return true;
    }
}

＆＃34;文件＆＃34;是一个简单的pojo：

@Entity
public class Document {
    private String documentName;

    public Document() {
    }

    public Document(String documentName) {
        this.setDocumentName(documentName);
    }

    public String getDocumentName() {
        return documentName;
    }

    public void setDocumentName(String documentName) {
        this.documentName = documentName;
    }
}

所以，如果问题出在客户端或服务器端，我真的无法获得。

谢谢！

//////////////////////////////

编辑： 我终于让它工作了，但 使用axios而不是fecth ：

这是我的最终弹簧靴控制器：

@RequestMapping(value = "/", method = RequestMethod.POST)
    public boolean addDocument(@RequestPart("document") Document document, @RequestPart("file") MultipartFile file) {
        // Do things!
        return true;
    }

我的javascript / axios电话：

var documentBlob = new Blob([JSON.stringify({ documentName: "test" })], {
      type: "application/json"
    });
    var formData = new FormData();

    formData.append("document", documentBlob);
    formData.append("file", this.state.file);

    axios({
      method: "post",
      url: "/document/",
      data: formData,
      config: { headers: { "Content-Type": "multipart/form-data" } }
    })
      .then(response => {
        console.log("it's working!");
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

Answer 1

我认为问题出在你的spring控制器请求映射中。您不应该在那里映射到/。

试试这个......

@RestController
@RequestMapping("/document")
public class DocumentController {

    @Autowired
    private DocumentRepository documentRepository;  

    @RequestMapping(method = RequestMethod.POST, consumes = { "multipart/form-data" })
    public boolean addDocument(@RequestPart("properties") Document document, @RequestPart("file") MultipartFile file) {
        documentRepository.save(document);
        return true;
    }
}

Answer 2

您是否尝试使用el-form.demo-ruleForm(:model="editedItem", :key="'form'+changePassword", status-icon, :rules="formRules", ref="userForm", label-width="140px")内容类型标头发出请求？

使用该映射方法消耗已定义的标头，您的控制器无法在没有正确内容类型的情况下解析请求。

Answer 3

我终于让它工作了，但是使用了axios而不是fecth。

查看已编辑的原始帖子以查看我的解决方案。

SpringBoot / Fetch：无效的mime类型＆＃34;未定义＆＃34;：不包含＆＃39; /＆＃39;

3 个答案: