[前后端基础]图片传输与异步

前后端之间传递照片

在前后端之间传递照片,通常可以采用以下几种方式:

  1. Base64 编码传输:将图片转换为 Base64 编码的字符串,然后通过接口传递到后端,后端再将 Base64 字符串转换回图片格式。这种方式简单易行,但会增加数据量,并且传输的内容会被增大约 33%。

  2. 文件上传:前端通过表单或其他方式将图片文件上传到后端服务器,后端接收到文件后保存在服务器上,并返回文件的地址或标识给前端,前端可以通过这个地址或标识来获取图片。

  3. 使用 Blob 对象:前端可以将图片封装为 Blob 对象,并使用 FormData 将 Blob 对象传递到后端。后端可以通过接收 FormData 来获取图片数据。

  4. 使用流传输:前端可以将图片数据通过流的方式传输到后端,后端接收到流后进行处理。这种方式适用于大文件传输,可以减少内存占用。

  5. WebSocket 传输:使用 WebSocket 在前后端之间建立持久连接,前端将图片数据通过 WebSocket 传输到后端。这种方式适用于实时性要求较高的场景

前端怎样使用后端传来的base64编码图片

前端可以通过以下步骤使用后端传来的 Base64 编码图片:

  1. 接收 Base64 编码图片:后端将 Base64 编码图片作为响应数据发送给前端。

  2. 创建图片元素:前端可以使用 JavaScript 创建一个图片元素,或者直接将 Base64 编码图片赋值给已存在的图片元素的 src 属性。

  3. 设置图片源:将接收到的 Base64 编码图片作为图片元素的 src 属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Base64 Image</title>
</head>
<body>
    <img id="image" alt="Base64 Image">
    
    <script>
        // 假设后端传来的 Base64 编码图片存储在变量 base64Image 中
        const base64Image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
        
        // 创建图片元素
        const imgElement = document.getElementById("image");

        // 设置图片源
        imgElement.src = base64Image;
    </script>
</body>
</html>

在这个示例中,后端传来的 Base64 编码图片存储在变量 base64Image 中,并且使用 JavaScript 获取到了 id 为 "image" 的图片元素,并将 base64Image 赋值给了该图片元素的 src 属性,从而显示 Base64 编码的图片。

javascript遍历数组,每隔一段时间按顺序打印数组中的元素

const array = [1, 2, 3, 4, 5];
let index = 0;

const printElement = () => {
  // 打印当前索引对应的数组元素
  console.log(array[index]);
  
  // 增加索引,以便下次打印下一个元素
  index++;
  
  // 如果索引超出数组范围,则重置索引为0,重新开始遍历
  if (index >= array.length) {
    index = 0;
  }
};

// 每隔一段时间调用 printElement 函数打印数组元素
const intervalId = setInterval(printElement, 1000); // 每隔一秒打印一个元素

// 可以根据需要在一定时间后停止打印
setTimeout(() => {
  clearInterval(intervalId); // 停止打印
}, array.length * 1000); // 停止时间为数组长度乘以间隔时间

这段代码首先定义了一个包含数字的数组 array,然后通过 setInterval 函数每隔一段时间调用 printElement 函数来打印数组中的元素。在 printElement 函数中,首先打印当前索引对应的数组元素,然后增加索引以便下次打印下一个元素。当索引超出数组范围时,将索引重置为0,从头开始重新遍历数组。最后,通过 setTimeout 函数在一定时间后停止打印,这个时间为数组长度乘以打印间隔时间。

相关推荐
anyup_前端梦工厂1 小时前
了解几个 HTML 标签属性,实现优化页面加载性能
前端·html
前端御书房2 小时前
前端PDF转图片技术调研实战指南:从踩坑到高可用方案的深度解析
前端·javascript
2301_789169542 小时前
angular中使用animation.css实现翻转展示卡片正反两面效果
前端·css·angular.js
风口上的猪20153 小时前
thingboard告警信息格式美化
java·服务器·前端
程序员黄同学3 小时前
请谈谈 Vue 中的响应式原理,如何实现?
前端·javascript·vue.js
爱编程的小庄4 小时前
web网络安全:SQL 注入攻击
前端·sql·web安全
宁波阿成4 小时前
vue3里组件的v-model:value与v-model的区别
前端·javascript·vue.js
柯腾啊5 小时前
VSCode 中使用 Snippets 设置常用代码块
开发语言·前端·javascript·ide·vscode·编辑器·代码片段
Jay丶萧邦5 小时前
el-select:有关多选,options选项值不包含绑定值的回显问题
javascript·vue.js·elementui
weixin_535854225 小时前
oppo,汤臣倍健,康冠科技,高途教育25届春招内推
c语言·前端·嵌入式硬件·硬件工程·求职招聘