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