当前位置： 首页 > news >正文

【日常记录】【JS】前端预览图片的两种方式，Base64预览和blob预览

news 2026/3/29 1:33:35

文章目录

    • 1、前言
    • 1、FileReader
    • 3、window.URL.createObjectURL
    • 4、参考链接

1、前言

  • 一般来说，都是 后端返回给前端图片的url，前端直接把这个值插入到 img 的src 里面即可
  • 还有一种情况是前端需要预览一下图片，比如：上传头像按钮，前端需要临时 预览一下图片

这个时候就有两种方案了

  1. 方式一 转base64预览
  2. 方式二 生成blob图片预览路径url

1、FileReader

可以利用 FileReader 把文件转成 base64格式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input id="file1" type="file" value="FileReader.readAsDataURL 方式" multiple><script>let file1El = document.querySelector('#file1')file1El.addEventListener('change', function (e) {// 可能会上传多个文件 let files = e.target.filesconsole.log('files', files);if (files.length != 0) {loadFiles(files).then((fileContents) => {console.log(fileContents); // 在所有文件加载完成后，打印包含所有文件内容的数组fileContents.forEach(f => {let imgEl = document.createElement('img')imgEl.src = fimgEl.style.width = '100px'imgEl.style.height = '200px'document.body.appendChild(imgEl)})}).catch((error) => {console.error(error); // 处理错误情况});}})function loadFiles(files) {const promises = []for (const item of files) {promises.push(readFile(item))}return Promise.all(promises);}// 利用 promise 封装一个生成 base64的 函数，因为 onload 事件不是同步的，它需要事件处理function readFile(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = (event) => {const result = reader.result;if (typeof result === 'string') {resolve(result);} else {reject(new Error("Failed to read file"));}};reader.onerror = (event) => {reject(event.target.error);};// 参数file: 从中读取的 Blob 或 File 对象reader.readAsDataURL(file);});}</script></body></html>

3、window.URL.createObjectURL

window.URL.createObjectURL 方法 返回一个 url，可以直接放在 img 的src 属性上，也可以直接放在浏览器打开

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input id="file2" type="file" value="createObjectURL 方式" multiple><script>let file2El = document.querySelector('#file2')file2El.onchange = function () {let files = file2El.filesfor (const item of files) {// 接收 File、Blob 或 MediaSource 对象。let url = window.URL.createObjectURL(item)console.log('url', url);let img = document.createElement('img')// createObjectURL 返回的格式比如:blob: http://127.0.0.1:5500/3c9e3502-1c0c-4dae-b4dc-26b68f207285img.src = urldocument.body.appendChild(img)}}</script>
</body></html>

4、参考链接

  • createObjectURL MDN
  • FileReader MDN

相关文章：

【日常记录】【JS】前端预览图片的两种方式，Base64预览和blob预览

文章目录 1、前言1、FileReader3、window.URL.createObjectURL4、参考链接 1、前言 一般来说&#xff0c;都是 后端返回给前端图片的url&#xff0c;前端直接把这个值插入到 img 的src 里面即可还有一种情况是前端需要预览一下图片&#xff0c;比如&#xff1a;上传头像按钮&a…...

编程日记 2024/6/1 12:28:03

每日刷题——杭电2156.分数矩阵和杭电2024.C语言合法标识符

杭电2156.分数矩阵 原题链接&#xff1a;Problem - 2156 题目描述 Problem Description&#xff1a;我们定义如下矩阵: 1/1 1/2 1/3 1/2 1/1 1/2 1/3 1/2 1/1 矩阵对角线上的元素始终是1/1&#xff0c;对角线两边分数的分母逐个递增。请求出这个矩阵的总和。 Input&#xf…...

编程日记 2024/6/1 12:27:02

爬虫学习--18.反爬斗争 selenium（3）

操作多窗口与页面切换 有时候窗口中有很多子tab页面。这时候肯定是需要进行切换的。selenium提供了一个叫做switch_to.window来进行切换&#xff0c;具体切换到哪个页面&#xff0c;可以从driver.window_handles中找到。 from selenium import webdriver from selenium.webdri…...

编程日记 2024/6/1 12:25:00

如何评价GPT-4o?

GPT-4o是OpenAI为聊天机器人ChatGPT发布的一款新语言模型&#xff0c;其名称中的“o”代表Omni&#xff0c;即全能的意思&#xff0c;凸显了其多功能的特性。这款模型在多个方面都有着显著的优势和进步。 首先&#xff0c;GPT-4o具有极强的多模态能力&#xff0c;它能够接受文本…...

编程日记 2024/6/1 12:23:59

算能BM1684+FPGA+AI+Camera推理边缘计算盒

搭载算丰智算芯片BM1684&#xff0c;是面向AI推理的边缘计算盒。高效适配市场上所有AI算法&#xff0c;实现视频结构化、人脸识别、行为分析、状态监测等应用&#xff0c;为智慧城市、智慧交通、智慧能源、智慧金融、智慧电信、智慧工业等领域进行AI赋能。 产品规格 处理器芯片…...

编程日记 2024/6/1 12:19:52

不同厂商SOC芯片在视频记录仪领域的应用

不同SoC公司芯片在不同产品上的应用信息&#xff1a; 大唐半导体 芯片型号: LC1860C (主控) LC1160 (PMU)产品应用: 红米2A (399元)大疆晓Spark技术规格: 28nm工艺&#xff0c;4个ARM Cortex-A7处理器&#xff0c;1.5GHz主频&#xff0c;2核MaliT628 GPU&#xff0c;1300万像…...

编程日记 2024/6/1 12:18:51

【Python入门学习笔记】Python3超详细的入门学习笔记，非常详细（适合小白入门学习）

Python3基础 想要获取pdf或markdown格式的笔记文件点击以下链接获取 Python入门学习笔记点击我获取 1&#xff0c;Python3 基础语法 1-1 编码 默认情况下&#xff0c;Python 3 源码文件以 UTF-8 编码&#xff0c;所有字符串都是 unicode 字符串。 当然你也可以为源码文件指…...

编程日记 2024/6/1 12:15:48

通用代码生成器应用场景三，遗留项目反向工程

通用代码生成器应用场景三&#xff0c;遗留项目反向工程 如果您有一个遗留项目&#xff0c;要重新开发&#xff0c;或者源代码遗失&#xff0c;或者需要重新开发&#xff0c;但是希望复用原来的数据&#xff0c;并加快开发。 如果您的项目是通用代码生成器生成的&#xff0c;…...

编程日记 2024/6/1 12:14:45

轻量级动态可监控线程池 - DynamicTp

一、背景介绍 使用线程池ThreadPoolExecutor的过程中你是否有以下痛点呢&#xff1f; 代码中创建了一个 ThreadPoolExecutor&#xff0c;但是不知道那几个核心参数设置多少比较合适凭经验设置参数值&#xff0c;上线后发现需要调整&#xff0c;改代码重新发布服务&#xff0c…...

编程日记 2024/6/1 12:13:43

对于vsc中的vue命令 vue.json

打开vsc 然后在左下角有一个设置 2.点击用户代码片段 3.输入 vue.json回车 将此代码粘贴 &#xff08;我的不一定都适合&#xff09; { "vue2 template": { "prefix": "v2", "body": [ "<template>", " <…...

编程日记 2024/6/1 12:12:41

Spring Boot 官方不再支持 Spring Boot 的 2.x 版本！新idea如何创建java8项目

idea现在只能创建最少jdk17 使用 IDEA 内置的 Spring Initializr 创建 Spring Boot 新项目时&#xff0c;没有 Java 8 的选项了&#xff0c;只剩下了 > 17 的版本 是因为 Spring Boot 官方不再支持 Spring Boot 的 2.x 版本了&#xff0c;之后全力维护 3.x&#xff1b;而 …...

编程日记 2024/6/1 12:10:39

分享一个 ASP.NET Web Api 上传和读取 Excel的方案

前言 许多业务场景下需要处理和分析大量的数据&#xff0c;而 Excel 是业务人员常用的数据表格工具&#xff0c;因此&#xff0c;将 Excel 表格中内容上传并读取到网站&#xff0c;是一个很常见的功能&#xff0c;目前有许多成熟的开源或者商业的第三方库&#xff0c;比如 NPO…...

编程日记 2024/6/1 12:05:33

【算法实战】每日一题：将某个序列中内的每个元素都设为相同的值的最短次数（差分数组解法，附概念理解以及实战操作）

题目 将某个序列中内的每个元素都设为相同的值的最短次数 1.差分数组&#xff08;后面的减去前面的值存储的位置可以理解为中间&#xff09; 差分数组用于处理序列中的区间更新和查询问题。它存储序列中相邻元素之间的差值&#xff0c;而不是直接存储每个元素的值 怎么对某…...

编程日记 2024/6/1 12:04:31

EXCEL数据透视图中的日期字段，怎样自动分出年、季度、月的功能?

在excel里&#xff0c;这个果然是有个设置的地方&#xff0c;修改后就好了。 点击文件选项卡&#xff0c;选项&#xff0c;在高级里&#xff0c;将图示选项的勾选给取消&#xff0c;然后再创建数据透视表或透视图&#xff0c;日期就不会自动组合了&#xff1a; 这个选项只对新…...

编程日记 2024/6/1 12:02:29

【设计模式深度剖析】【1】【行为型】【模板方法模式】| 以烹饪过程为例加深理解

&#x1f448;️上一篇:结构型设计模式对比 文章目录 模板方法模式定义英文原话直译如何理解呢&#xff1f; 2个角色类图代码示例 应用优点缺点使用场景 示例解析&#xff1a;以烹饪过程为例类图代码示例 模板方法模式 模板方法模式&#xff08;Template Method Pattern&…...

编程日记 2024/6/1 12:01:28

JAVA：异步任务处理类CompletableFuture让性能提升一倍

一、前言 CompletableFuture 是 Java 8 引入的一个功能强大的类&#xff0c;用于异步编程。它表示一个可能尚未完成的计算的结果&#xff0c;你可以对其添加回调函数来在计算完成时执行某些操作。在 Spring Boot 应用中&#xff0c;CompletableFuture 可以用于提高应用的响应性…...

编程日记 2024/6/1 12:00:27

10Linux 进程管理学习笔记

Linux 进程管理 目录 文章目录 Linux 进程管理一.进程1.显示当前进程状态(ps)进程树(pstree)1.1实时显示进程信息(top)顶部概览信息&#xff1a;CPU 状态&#xff1a;内存状态&#xff1a;进程信息表头&#xff1a;进程列表&#xff1a;1.2(htop) 2.终止进程(kill)2.1通过名称…...

编程日记 2024/6/1 11:59:25

一些关于深度聚类以及部分对比学习的论文阅读笔记

目录 资料SwAV问题方法方法的创新点为什么有效有什么可以借鉴的地方聚类Multi-crop 代码 PCL代码 Feature Alignment and Uniformity for Test Time Adaptation代码 SimSiam 资料 深度聚类算法研究综述(很赞&#xff0c;从聚类方法和深度学习方法两个方面进行了总结&#xff0…...

编程日记 2024/6/1 11:58:24

【ARM-Linux篇】u-boot编译

一、u-boot简介 uboot是一种通用的引导加载程序&#xff0c;它可以用于多种嵌入式系统&#xff0c;支持多种操作系统&#xff0c;如Linux, Android,NetBSD等。uboot的主要作用是将操作系统内核从存储设备&#xff08;如Flash, SD卡等&#xff09;加载到内存中&#xff0c;并执…...

编程日记 2024/6/1 11:54:20

Lombok一文通

1、Lombok简介 作为java的忠实粉丝&#xff0c;但也不得不承认&#xff0c;java是一门比较啰嗦的语言&#xff0c;很多代码的编写远不如其他静态语言方便&#xff0c;更别说跟脚本语言比较了。 因此&#xff0c;lombok应运而生。 Lombok是一种工具库&#xff0c;它提供了一组…...

编程日记 2024/6/1 11:51:16

RT-Thread定时器管理与系统时钟节拍解析

RT-Thread定时器管理深度解析1. 系统时钟节拍机制1.1 时钟节拍基础概念实时操作系统(RTOS)的核心功能之一是对时间相关事件的管理&#xff0c;包括线程延时、时间片轮转调度以及定时器超时等。这些功能都依赖于系统时钟节拍(OS Tick)这一基本时间单位。时钟节拍本质上是特定频率…...

编程新知 2026/3/29 1:27:24

LVGL实战：用外部按键(Keypad)和旋转编码器(Encoder)在无触摸屏设备上实现流畅UI交互

LVGL物理交互实战&#xff1a;用按键与编码器打造无触摸屏的流畅UI控制 在智能家居控制面板、工业HMI设备等场景中&#xff0c;物理按键和旋转编码器因其可靠性和低成本优势&#xff0c;成为触摸屏的理想替代方案。本文将深入探讨如何通过LVGL的输入设备子系统&#xff0c;实现…...

编程新知 2026/3/29 0:53:15

面试官最爱问的归并排序：从递归到非递归，带你彻底搞懂边界条件与内存管理（避坑指南）

归并排序实战&#xff1a;从递归陷阱到非递归优化的工程级实现 在技术面试中&#xff0c;归并排序就像一位老练的考官&#xff0c;总能用各种边界条件挑战候选人的代码功底。我曾见过不少开发者能流畅写出递归版本&#xff0c;却在非递归实现中陷入无限循环&#xff1b;也有候选…...

编程新知 2026/3/28 23:52:57

LazyVim终极指南：5分钟打造高效Neovim开发环境

LazyVim终极指南&#xff1a;5分钟打造高效Neovim开发环境 【免费下载链接】LazyVim Neovim懒人配置。 项目地址: https://gitcode.com/GitHub_Trending/la/LazyVim LazyVim是一个基于&#x1f4a4; lazy.nvim的Neovim懒人配置方案&#xff0c;专为希望快速搭建专业开发…...

编程新知 2026/3/28 22:08:03

从标准到实战：网络变压器在POE应用中的AF/AT/BF/BT详解与电路设计指南

1. 网络变压器在POE系统中的核心作用 第一次接触POE供电系统时&#xff0c;我对着电路板上那个带铁壳的方形元件研究了半天——这就是网络变压器。它看起来平平无奇&#xff0c;却是整个POE系统的"心脏"。简单来说&#xff0c;网络变压器在POE系统中要同时干两件事&a…...

编程新知 2026/3/28 21:53:59

AnythingLLM文档处理革命：如何用统一接口解析20+文件格式构建智能知识库

AnythingLLM文档处理革命&#xff1a;如何用统一接口解析20文件格式构建智能知识库 【免费下载链接】anything-llm 这是一个全栈应用程序&#xff0c;可以将任何文档、资源&#xff08;如网址链接、音频、视频&#xff09;或内容片段转换为上下文&#xff0c;以便任何大语言模型…...

编程新知 2026/3/28 21:39:53

无人机视角热成像行人车辆检测数据集VOC+YOLO格式2755张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)&#xff1a;2755标注数量(xml文件个数)&#xff1a;2755标注数量(txt文件个数)&#xff1a;2755标注类别…...

编程新知 2026/3/28 20:45:27

STM32实战(五)卡尔曼滤波在ADC噪声抑制中的参数优化与效果对比

1. 卡尔曼滤波在ADC噪声抑制中的核心价值 第一次用STM32的ADC采集传感器数据时&#xff0c;我被跳动的数值惊呆了——温度读数上下浮动2℃&#xff0c;红外测距值波动超过10%。这种噪声不仅影响数据可信度&#xff0c;更会导致控制逻辑误判。后来接触到卡尔曼滤波&#xff0c;…...

编程新知 2026/3/28 18:30:23

5分钟掌握OptiScaler：让所有显卡都能享受DLSS级画质的免费神器

5分钟掌握OptiScaler&#xff1a;让所有显卡都能享受DLSS级画质的免费神器 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler 还在为显…...

编程新知 2026/3/28 17:48:01

QIP 2023：亚马逊量子计算三篇论文突破

量子技术 某机构在QIP 2023发表的量子计算论文 针对“超级Grover”优化、拓扑数据分析的量子算法以及物理系统模拟的研究&#xff0c;展示了某机构在量子计算领域的广泛兴趣。 作者&#xff1a; Fernando Brando 日期&#xff1a; 2023年2月2日 阅读时间&#xff1a; 7分钟 在今…...

编程新知 2026/3/28 17:46:01