获取到的base64图片不显示并且控制台报错Request Header Fields Too Large & base64图片转file

1. 获取到的base64图片不显示并且控制台报错Request Header Fields Too Large

在获取的base64路径前添加:“data:image/jpeg;base64,”

const imgSrc = "data:image/jpeg;base64," + result.data.jpg_base64

具体参考:参考链接

2. base64图片转file

export const base64ImgtoFile = (dataurl, filename = "file") => {
  const arr = dataurl.split(",");
  const mime = arr[0].match(/:(.*?);/)[1];
  const suffix = mime.split("/")[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime,
  });
};

有需要可参考:参考链接1 参考链接2

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是一个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; } } ``` 这段代码是一个简单的示例,具体实现还需要根据实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值