--- 前后端的文件交互 ---
使用formData 表单来储存
发送的文件,并通过ajax来向后端发送请求
let formData = new FormData();formData.append("sender", JSON.stringify(sender));files.forEach(file =>formData.append("files", file));$.ajax({url: "save/files",type: "POST",contentType : false,processData : false,data: formData,success: function (result){console.log(result);},error: function (err) {if (err.status == 406) {location.href = "login.html";return;}console.log(result.message);}});
后端从form表单中读取到文件数据
@RequestMapping("/files")public int saveFiles(@NotNull @RequestParam("files") List<MultipartFile> files){//储存
}
使用base64编码来传递图片
将图片编码成base64字符串发送给后端,经过后端解码来储存
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {const file = e.target.files[0];if (file) {const reader = new FileReader();// 成功读取时的回调reader.onload = (event) => {const base64String = event.target.result; };// 开始读取文件(转换为 Base64)reader.readAsDataURL(file);}
});$.ajax({url: "save/files",type: "POST",data: baseStr: base64String,success: function (result){console.log(result);},error: function (err) {if (err.status == 406) {location.href = "login.html";return;}console.log(result.message);}});
后端对base64文件解码
// 编码格式 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1public static String saveBase64ToFile(String base64Data, String saveDirectory) throws IOException {// 1. 分离MIME类型和Base64数据String[] parts = base64Data.split(",");String saveDirectory= "D:/saveFile"; String mimeInfo = parts[0];String base64Image = parts[1];//后缀可以通过parts[0] 通过映射关系得到 image/jpeg = jpgString fileName = UUID.randomUUID().toString() + "." + "jpg";Path filePath = Paths.get(saveDirectory, fileName);//将字符串解码为文件byte[] decodedBytes = Base64.getDecoder().decode(base64Image);// 6. 写入文件Files.write(filePath, decodedBytes);return fileName;
}