首页 > 其他分享 >前后端以数据url的方式传递字节流

前后端以数据url的方式传递字节流

时间:2023-10-04 20:15:17浏览次数:39  
标签:字节 url 数据 端以 URL data response

正常情况下通过字节流,将本地的一张图片渲染到前端(vue2):

后端:

String imagePath="图片路径";
        byte[] imageBytes= Files.readAllBytes(Paths.get(imagePath)); //获取文件字节
        String base64Image= Base64.getEncoder().encodeToString(imageBytes);//把这些图片的组成字节变成代表这个图片的字符串
        return ResponseEntity.ok(base64Image); 

 

前端:

<template>   <img :src="imageSrc">  </template>
<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data(){
    return{
      imageSrc:'', 
  }  },
methods: {
  getPhoto(){
     axios.post("/api/toGetPhoto")
    .then(response=>{
      console.log("response.data是"+response.data); 
      this.imageSrc='data:image/png;base64,'+response.data;}).catch(error=>{  alert("请求失败")  });  } },  }  </script>

 

运行之后,报错URL TOO LONG,而在控制台上可以看到response.data是一串特别长的字符串,而这个错误就是表示URL过长,超出了服务器能够处理的限制。HTTP协议对URL的长度是有限制的,不同的服务器对URL的最大长度限制可能会有所不同。当你发送的URL超过服务器限制时,服务器会返回"URL TOO LONG"错误。

 

解决方案:

 使用数据url来显示图片,而不是直接在'src'中传递过长的Base64字符串,数据url就是在'src'属性中直接包含图片的数据而不需要额外的网络请求,数据url的目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。

 

修改:

 

 this.imageSrc='data:image/png;base64,'+response.data;

上面说的那串很长的字符,其实是一张小图片,将这些字符复制黏贴到浏览器的地址栏中并转到,就能看到它了,其中data表示取得数据的协定名称,image/png 是数据类型名称,
base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。<img src="data:image/png;base64,dnvjsdbuiab...(很长的字符串)" />也能表示图片,不用http请求,浏览器不缓存。

 

像视频等其他文件也能通过这种数据url的方式进行见后端交互。

标签:字节,url,数据,端以,URL,data,response
From: https://www.cnblogs.com/xialang/p/17742660.html

相关文章

  • JavaScript中获取URL中参数值的方法
    方法一:正则法functiongetQueryString(name){varreg=newRegExp('(^|&)'+name+'=([^&]*)(&|$)','i');varr=window.location.search.substr(1).match(reg);if(r!=null){returnunescape(r[2]);......
  • URL路径参数转换器
    作用和基本使用作用:用于校验请求的路由参数中的值是否符合符合指定的规则。这个使用方法和django中的路由参数转换器是差不多的。至于为什么用路径参数转换器,原因和django中的一样,虽然你可以在视图函数中校验,但是如果有好几个视图函数都要用到相同的校验规则,此时使用路径参数......
  • 字节跳动前端技术博客水文点评 All In One
    字节跳动前端技术博客水文点评AllInOneKPI/OKR产物,不求甚解,没有深度前端实现下载图片等文件资源服务端禁用下载前端禁用下载https://mp.weixin.qq.com/s/ufT_4HzvSRO0wfJE6Dwhogdemos(......
  • 获取url后面的参数
    方式一finalStringqueryString=request.getQueryString();System.out.println(queryString);//解码System.out.println(URLDecoder.decode(queryString,StandardCharsets.UTF_8));测试:pageSize=25&pageNum=1&sort%5B%27id%27%5D=desc&sort%5B%27name%27%5D=......
  • 从“概念”到“应用”,字节跳动基于 DataLeap 的 DataOps 实践
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群近日,火山引擎数智平台VeDIMeetup「超话数据」在深圳举办,来自火山引擎的产品专家分享了字节跳动基于DataLeap的DataOps实践,数据研发面临的挑战以及字节跳动最佳实践。现如今,越来越多的企业也......
  • 从“概念”到“应用”,字节跳动基于 DataLeap 的 DataOps 实践
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 近日,火山引擎数智平台VeDIMeetup「超话数据」在深圳举办,来自火山引擎的产品专家分享了字节跳动基于DataLeap的DataOps实践,数据研发面临的挑战以及字节跳动最佳实践。 现如今,越......
  • 挑战程序设计竞赛 2.1章习题 POJ 3009 Curling 2.0
    https://vjudge.net/problem/POJ-3009在MM-21星球上,今年的奥运会之后,冰壶运动开始流行起来。但规则与我们的有些不同。冰壶比赛是在一块冰板上进行的,冰板上标有方形网眼。他们只使用一块石头。游戏的目的是用最少的步数将石头从起点引向终点。图1显示了游戏棋盘的一个示例......
  • 无涯教程-JavaScript - ENCODEURL函数
    描述ENCODEURL函数返回URL编码的字符串。语法ENCODEURL(text)争论Argument描述Required/OptionalTextAstringtobeURLencoded.Required适用性Excel2013,Excel2016Example参考链接https://www.learnfk.com/javascript/advanced-excel-statistical-encode......
  • 大华城市安防监控系统平台管理 attachment_downloadByUrlAtt.action 任意文件下载漏洞
    漏洞简介大华城市安防监控系统平台管理存在任意文件下载漏洞,攻击者通过漏洞可以下载服务器上的任意文件漏洞复现fofa语法:app="dahua-DSS"登录页面如下:POC:/portal/attachment_downloadByUrlAtt.action?filePath=file:///etc/passwdnuclei批量yaml文件id:dahua_DSS_attach......
  • 深入解析 curl:掌握命令行的网络传输利器
    当我们使用curl进行网络请求时,了解如何有效地使用参数是非常重要的。curl提供了许多参数,用于控制请求的行为和配置。在这篇博客文章中,我们将详细解释一些常用的curl参数,帮助你更好地理解如何利用这个强大的工具。什么是curl?curl是一个命令行工具,用于发送和接收数据,通常用于......