Upload上传文件报错Failed to parse multipart servlet request； nested exception is java.lang.RuntimeExceptio

bug问题描述

在使用view-ui-plus的上传组件Upload上传文件的时候，发生了一件不可思议的事情，莫名其妙的踩坑。报错：Failed to parse multipart servlet request; nested exception is java.lang.RuntimeException: java.io.IOException: UT000036: Connection terminated parsing multipart data

<Upload
    ref="uploadRef"
    :show-upload-list="false"
    :default-file-list="uploadList"
    :on-success="handleSuccess"
    :format="['jpg', 'jpeg', 'png']"
    :max-size="2048"
    :data="{'attachCategory':'1','allowManage':'0'}"
    :headers="headers"
    :on-format-error="handleFormatError"
    :on-exceeded-size="handleMaxSize"
    :before-upload="handleBeforeUpload"
    multiple
    type="drag"
    action="/api/web/file/upload"
    style="display: inline-block; width: 120px"
  >
    <div style="width: 120px; height: 120px; line-height: 120px">
      <Icon type="md-add" size="30"></Icon>
    </div>
  </Upload>

const headers = {
  'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarytvoZBoJHt8MdsKar',
  'Authorization': 'Bearer ' + token
}

如果是这样设置的'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarytvoZBoJHt8MdsKar'就报下面这个错误


如果是这样设置的'Content-Type': 'multipart/form-data就报下面这个错误

bug解决过程

开始报这个错误的时候，首先想到的是去测一下后端的接口是否正常，在Swagger中测试接口没有问题，那就说明问题在前端。一般这种情况应该是headers头设置有问题，对比Swagger接口的Content-Type去设置本地环境的Content-Type，结果就报了上面的错误。这是为什么呢，明明是一样的设置啊，咋还是报错呢。
所有的问题都是有原因的，只要去找寻就一定会有发现。抱着这样的态度，我去view-ui-plus的官方网站查看api。也看不出来有什么问题，那就删代码，一点点排除。当我删掉headers的Content-Type的设置后再试，上传竟然成功了，原来是Content-Type设置的问题。
为什么会是这样呢，我去查了一下AI，下面是AI给我的回答

在使用 view-ui-plus 的 Upload 组件时，设置 Content-Type 为 multipart/form-data 导致上传失败，而不设置则成功，这通常是由于以下几个原因造成的：

1. 自动设置 Content-Type

当浏览器发送 multipart/form-data 请求时，它会自动生成一个合适的 boundary 值，并将其包含在 Content-Type 头中。如果你手动设置了 Content-Type，但没有指定 boundary，服务器可能无法正确解析请求体，导致上传失败。

2. 服务器端解析问题

服务器端可能期望 Content-Type 头中的 boundary 值是由浏览器自动生成的。如果你手动设置了 Content-Type，服务器可能无法正确解析请求体，导致上传失败。

3. 服务器端配置问题

服务器端可能对 Content-Type 头有特定的要求，手动设置 Content-Type 可能不符合这些要求，导致服务器返回错误。

解决方法

1. 不手动设置 Content-Type

让浏览器自动设置 Content-Type 头，这样可以确保 boundary 值是正确的。

const headers = {
  'Authorization': 'Bearer ' + token
};

const uploadProps = {
  action: '/api/web/file/upload',
  headers: headers,
  // 其他配置项
};

<Upload {...uploadProps}>
  <Button>点击上传</Button>
</Upload>

总结

解决bug的过程就像破案，一步一步地去分析，总能发现蛛丝马迹，不管是查资料问AI还向别人请教，最终还是要靠自己解决问题。保持耐心不放弃，一步一步去找，总会找到的。