vue上传图片java后端转换成base64 代码示例并输出到控制台
时间: 2023-08-16 21:05:23 浏览: 185
vue中实现图片和文件上传的示例代码
好的,下面是一个vue上传图片并且通过Java后端将图片转换成base64并输出到控制台的代码示例:
Vue前端部分:
```
<template>
<div>
<input type="file" @change="onFileChange">
</div>
</template>
<script>
export default {
methods: {
onFileChange(event) {
// 获取文件对象
const file = event.target.files[0]
// 创建 FileReader 对象
const reader = new FileReader()
// 读取文件
reader.readAsDataURL(file)
// 文件读取完成后执行的回调函数
reader.onload = () => {
// 获取 base64 编码的图片字符串
const base64Image = reader.result
// 发送请求到后端
this.postImage(base64Image)
}
},
postImage(base64Image) {
// 发送 Ajax 请求到后端
// 注意这里的 url 和请求方法要根据实际情况进行修改
axios.post('/api/uploadImage', { base64Image }).then(response => {
console.log(response.data)
})
}
}
}
</script>
```
Java后端部分:
```
@RequestMapping(value = "/api/uploadImage", method = RequestMethod.POST)
@ResponseBody
public String uploadImage(@RequestBody Map<String, String> requestMap) {
try {
// 获取 base64 编码的图片字符串
String base64Image = requestMap.get("base64Image");
// 去掉字符串头部的 "data:image/png;base64," 部分
base64Image = base64Image.substring(base64Image.indexOf(",") + 1);
// 解码 base64 编码的图片字符串
byte[] imageBytes = Base64.getDecoder().decode(base64Image);
// 将图片字节流输出到控制台
System.out.println(new String(imageBytes));
// 将图片字节流转换成 base64 编码的字符串
String base64ImageString = Base64.getEncoder().encodeToString(imageBytes);
return base64ImageString;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
```
这段代码是一个简单的示例,具体实现还需要根据实际情况进行修改。
阅读全文