the request was rejected because no multipart boundary was found

最新推荐文章于 2025-02-07 17:24:48 发布

原创最新推荐文章于 2025-02-07 17:24:48 发布 · 1.4w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react.js

JS 专栏收录该内容

4 篇文章

订阅专栏

本文解析了前端使用React遇到的上传文件错误，介绍了如何设置FormData正确格式并提供了解决方案，包括设置Content-Type和FormData对象的使用实例。

前端完整报错如下：

Could not parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

前端使用React进行开发

分析：

由于后端设置的是multipart files，所以在前端要穿对应的格式，header中设置参数即可。
new 一个FormData对象，文件列表中的每个文件添加到formData 对象中，注意，文件列表中每个元素都是JS 的 File对象。
下图所示是浏览器控制台输出的File对象。
在这里插入图片描述
具体实现见代码示例。

解决方法如下：

    let formData = new FormData();
    this.pictures.map((item)=>{
      formData.append("pictures", this.item);
    })
    
    // formData.append("content", e.content);
    // formData.append("issueTime", getNow("YYYY-mm-dd HH:MM"));
    // formData.append("issuer", store.getState());
    // formData.append("title", e.title);

    axios({
      url: "/api/newsInsert",
      method: "post",
      headers: {
        "Content-Type": "multipart/form-data",
      },
      params: {
        content: e.content,
        issueTime: getNow("YYYY-mm-dd HH:MM"),
        issuer: store.getState(),
        title: e.title,
      },
      data: formData,
    }).then(
      (response) => {
        console.log(response.data);
      },
      (error) => {
        console.log(error);
      }
    );