1、后端转base64

我们根据本地的路径地址转换为base64编码传到前端

public static String convertImageToBase64(String imagePath) {

try {

// 读取图片文件

BufferedImage bufferedImage = ImageIO.read(new File(imagePath));

// 创建输出流

ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();

// 将图片写入输出流，格式为JPEG

ImageIO.write(bufferedImage, "jpg", byteArrayOutputStream);

// 将字节数组转换为Base64编码

byte[] imageBytes = byteArrayOutputStream.toByteArray();

return Base64.getEncoder().encodeToString(imageBytes);

} catch (IOException e) {

e.printStackTrace();

return null;

}

}

2、前端转换为Blob对象

从后端传过来的base64编码转换为Blob对象。

// 将base64编码的数据转换为Blob对象

function base64toBlob(base64Data, contentType = '') {

// 设置内容类型

contentType = contentType || '';

// 将base64编码的数据转换为字节字符

const byteCharacters = atob(base64Data);

// 创建字节数组

const byteNumbers = new Array(byteCharacters.length);

// 遍历字节字符，转换为字节数字

for (let i = 0; i < byteCharacters.length; i++) {

byteNumbers[i] = byteCharacters.charCodeAt(i);

}

// 将字节数字转换为Uint8Array

const byteArray = new Uint8Array(byteNumbers);

// 创建并返回Blob对象

return new Blob([byteArray], {type: contentType});

}

3、上传

再进行对应数据的上传，切记不能在同一个请求里面多次调用请求方法。所以我们需要进行封装。

async function uploadFileWithFetch(fileBlob, imagePath) {

const formData = new FormData();

formData.append('file', fileBlob, imagePath);

try {

//文件上传请求路径

const response = await fetch('/car/distinguish/upload', {

method: 'POST',

body: formData, // 自动设置Content-Type为multipart/form-data

});

if (!response.ok) {

throw new Error(`HTTP error! status: ${response.status}`);

}

const result = await response.json();

console.log('图片上传成功', result.msg + ":" + result.plateNumber);

return result;

} catch (error) {

console.error('图片上传失败', error);

}

}

在后端我们的 file 里面就可以拿到我们前端上传的文件了。

@RequestMapping("upload")

public Result upload(MultipartFile file)

三、应用场景

这个应用场景主要指的是前端上传文件到后端的流程，具体包括但不限于以下几种：

社交媒体：用户上传个人头像、分享照片、视频或文档到自己的动态或时间线。

在线文档编辑与存储服务：用户上传Word、Excel、PDF等文档到云端，以便在线预览、编辑和存储。

电子商务：商家上传商品图片、用户上传购物评价中的图片或视频证据。

内容管理系统(CMS)：网站管理员或编辑上传文章配图、多媒体内容到网站后台。

云存储服务：用户上传个人或工作文件到Dropbox、Google Drive、阿里云OSS等云存储平台。

简历投递与在线应聘：求职者上传简历、作品集或项目演示文件到招聘网站或公司门户。

教育平台：学生上传作业、论文或项目报告，教师上传教学资源。

博客与论坛：用户上传文章插图、论坛附件或个人签名图片。

医疗健康平台：患者上传医疗报告、影像资料，医生上传处方或诊断说明。

政府与企业服务：公民或员工上传申请材料、税务文件或企业报告到在线服务平台。