[FE] 用 FormData 上传多个文件到 MultipartFile[] 接口

Posted 2023-02-22

参考技术A

最近有一个场景，在提交表单的时候，需要实现添加附件的功能，
表单内容要先提交到服务端，创建一个 issue，然后再将附件添加到这个 issue 中。

所以，附件在用户添加的时候，是 没有立即上传 的，
用户可以随意在浏览器端添加和删除，issue 创建后再一起上传。

前端采用的组件库是 antd ，用到了 upload 组件。
服务端接口是自定义实现的，也许并不支持 antd upload 上传组件的规范。

服务端接受数据时，使用了 MultipartFile ，这是 Spring 框架中常用的 写法 。

我们先看看 html input[type=file] 组件默认行为，

点击 “选择文件”，浏览器会弹出一个窗口，

选中一个文件，点 “打开”，就会触发 onchange 事件，

在 onchange 事件中，可以通过 e.target.files[0] 拿到刚才上传的那个 File 对象 。

再来看一下 upload 组件的默认行为，

点击 “添加”，浏览器也会弹出那个选择文件的窗口，

选中一个文件，点 “打开”，发现上传失败了。

打开控制台，看到 upload 组件向 / 这个地址发送了一个 POST 请求，

数据格式如下，

我们可以向 upload 组件传入 action 参数，修改 POST 请求地址，

但是，选中文件后立即上传 不符合 我们的场景，我们需要提交表单之后，将多个文件统一上传。
所以我们得自定义 upload 组件的行为。

upload 组件的有一个 customRequest 属性（ #api ），
它可以配置自定义的上传行为。

我们的思路是，先将选中后自动上传的行为取消掉，然后再在提交表单后统一上传。
取消自动上传 的实现片段如下，

我们只需要在 customRequest 回调中，调用它的 onSuccess 参数即可。

删除也是可以用的，

现在我们添加两个附件，

接着来看前端怎样将这些附件，统一上传给服务端，具体实现如下，

可以看到请求成功了（项目中的 url 跟本例稍有不同，下图只为了示意），

还有几个需要注意的点：

上文 httpClient.post 实际调用了 XMLHttpRequest 发送请求，可能会遇到 跨域 的问题。
所以在调试上传接口的时候，需要检查一下服务端的配置，是否支持跨域请求。

CORS 相关的内容大致如下：

在预检请求阶段，服务端对 OPTIONS 请求的响应头中会包含 Access-Control-Allow-Origin ，

表明服务端接受该域 http://foo.example 的跨域请求。

注：
这里需要后端实现 OPTIONS 方法，后端框架一般会通过配置方式统一处理（返回 200 或 204，不能是 4xx）。
如果未配置统一处理方式，框架可能会直接返回 404 导致预检请求失败，CORS 请求也会失败。

使用 XMLHttpRequest 发送请求时，也可以携带 cookie 信息，

同时 预检请求中服务端响应头，也要包含 Access-Control-Allow-Credentials ，否则就不会发送 cookie

对于附带 cookie 的请求，服务器不能设置 Access-Control-Allow-Origin 的值为 “ * ”，否则请求将会失败。
而将 Access-Control-Allow-Origin 的值设置为具体的地址 http://foo.example ，请求才能成功。

我们上传功能用到了携带 cookie 的跨域请求，
可以看到服务端响应头中确实包含了， Access-Control-Allow-Credentials 和 Access-Control-Allow-Origin 两个字段。

Spring: Uploading Files
Spring: org.springframework.web.multipart #MultipartFile

ant-design v4.11.1
Ant Design - Upload #API

MDN: CORS