FormData提交Base64图片数组

java后台提供了接口，使用的是formdata格式提交参数，最开始提交的是file文件，在电脑上测试一切正常。

当我们使用手机打开html页面拍照上传就提示处理失败，无奈把error显示在div标签里发现是Error: Request failed with status code 413。

搜索了一下发现是提交的文件太大，解决方法有两种：

1.压缩图片。
2.将nginx和java后台服务器文件提交大小限制上调。

如果选择第2种，大文件存储空间占得大，加载显示也比较慢，于是我就选择了第1种压缩图片。

我们找到一个图片压缩库 canvas-resize@1.1.0

但压缩后变成了base64字符串，这样我们选多张图片就变成了字符串数组。

前端代码核心片段：

let data = new FormData();
data.append("id", that.id);
data.append("orderStatus", 3);
data.append("desc", that.message);
//base64图片数组
images.forEach((image) => { 
  data.append("images", image);
});

提交后台后就报错了，后台拿到的图片数组如下：

[2021-06-13 15:27:41,242] [INFO] ----------image:data:image/jpeg;base64
[2021-06-13 15:27:41,246] [INFO] ----------image:/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygwPGRBPDc3PHtYXUlkkYCZlo AjIqgtObDoKrarYqMyP/L2u71////m8H////6/ 

一张图片被当做了两个元素，将base64转成MultipartFiler失败了。

在网上各种查最终是FormData提交数组时需要写成如下形式：

//base64图片数组
images.forEach((image) => { 
  data.append("images[]", image);// 重点：加了中括号[]
});

至此后台获取数据成功。

[2021-06-13 15:27:41,242] [INFO] --------image:data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wB