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

文章目录

    • 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/845533.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【vuejs】 computed 和 watch 的区别和使用场景说明

1. 计算属性 computed 概述 计算属性 computed 是 Vue.js 中一个非常强大的功能&#xff0c;它允许开发者声明性地描述一个值是如何根据组件中其他数据计算得来的。计算属性是基于它们的依赖进行缓存的&#xff0c;只有当依赖发生变化时&#xff0c;计算属性才会重新计算。这使…

显示器与电脑如何分屏显示?

1.点击电脑屏幕右键--显示设置 2、然后找到屏幕---找到多显示器---选择扩展显示器

OpenAI 推出ChatGPT Edu,为高校定制版本

近日&#xff0c;OpenAI 宣布推出 ChatGPT Edu&#xff0c;这是一款专为高校打造的 ChatGPT 版本&#xff0c;旨在帮助学生、教师、研究人员和校园运营部门以负责任的方式部署和使用 AI。 ChatGPT Edu 由 GPT-4o 提供支持&#xff0c;具备强大的文本和图像推理能力&#xff0c;…

PHP 操作日期各种转换

日期操作 一、根据日期生成日期数组 /*** 根据指定日期生成日期数组* param $start_time 开始时间* param $end_time 结束时间* return array 返回数组结果*/ function createDateArr($start_time, $end_time) {$open_start_time $start_time;$open_end_time $end_ti…

Java18新版本特性!

Java 18引入了多项新特性&#xff0c;主要包括默认UTF-8字符集、简单的Web服务器、栈步进API等。Java 18是Oracle在2022年发布的版本&#xff0c;其旨在通过一系列创新特性来提升开发效率与性能。下面将逐一探讨Java 18的主要新特性以及它们对开发者的具体影响&#xff1a; 默认…

7、css3实现边框不停地跑动效果

效果例图&#xff1a; 1、上html代码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><meta …

华为Atlas 500 A2小站:如何解决docker的各种报错问题

问题&#xff1a;华为Atlas 500 A2小站&#xff1a;如何解决docker的各种报错问题 在Atlas 500 A2的小站环境搭建中&#xff0c;在使用docker时&#xff0c;如果所有办法都用了&#xff0c;还是报错的话。 如&#xff1a; 报错1&#xff1a;Error response from daemon: Get “…

文明互鉴促发展——2024“国际山地旅游日”主题活动在法国启幕

5月29日&#xff0c;2024“国际山地旅游日”主题活动在法国尼斯市成功举办。中国驻法国使领馆、法国文化旅游部门、地方政府、国际组织、国际山地旅游联盟会员代表、旅游机构、企业、专家、媒体等围绕“文明互鉴的山地旅游”大会主题和“气候变化与山地旅游应对之策”论坛主题展…

GNU Radio实现OFDM Radar

文章目录 前言一、GNU Radio Radar Toolbox编译及安装二、ofdm radar 原理讲解三、GNU Radio 实现 OFDM Radar1、官方提供的 grc①、grc 图②、运行结果 2、修改后的便于后续可实现探测和通信的 grc①、grc 图②、运行结果 四、资源自取 前言 本文使用 GNU Radio 搭建 OFDM Ra…

每日一题29:数据操作之数据重塑

一、每日一题 ---------------------- | Column Name | Type | ---------------------- | product_id | int | | store1 | int | | store2 | int | | store3 | int | ---------------------- 在 SQL 中&#xff0c;这张表的主键是 product…

项目3 构建移动电商服务器集群

项目引入 经过前期加班加点地忙碌&#xff0c;我们的网站顺利上线了&#xff01;年中促销活动也如约而至&#xff0c;虽然公司全体对这次活动进行多方面地准备和“布防”&#xff0c;可是意外还是发生了。就在促销优惠购物活动的当天&#xff0c;猛然增加的用户访问量直接导致浏…

java线程状态介绍

1.新建&#xff08;New&#xff09;: 线程对象已创建&#xff0c;但还没有调用 start() 方法。 2.可运行&#xff08;Runnable&#xff09;: 线程已启动&#xff0c;处于就绪状态&#xff0c;等待 JVM 的线程调度器分配CPU时间。 3.阻塞&#xff08;Blocked&#xff09;: 线程…

利用博弈论改进大模型性能:MIT最新研究解读

引言 在人工智能和大模型的发展过程中&#xff0c;我们常常遇到一个有趣的现象&#xff1a;同一个问题在不同形式下可能得到不同的答案。这种不一致性不仅降低了大模型的可信度&#xff0c;也限制了其在实际应用中的效果。为了应对这一问题&#xff0c;来自MIT的研究人员提出了…

什么是网络拓扑图,常见绘制工具

什么是网络拓扑图 网络拓扑图是一种图形表示方法&#xff0c;用于展示网络中组件的物理或逻辑布局。它显示了网络中的设备、连接以及它们之间的通信路径。网络拓扑图对于理解网络结构、规划网络扩展、诊断问题以及进行日常网络管理至关重要。 网络拓扑图的类型 1. 物理拓扑&…

Element快速入门

Vue组件库Element 1 Element介绍 vue是侧重于VM开发的&#xff0c;主要用于数据绑定到视图的&#xff0c;ElementUI就是一款侧重于V开发的前端框架&#xff0c;主要用于开发美观的页面的。 Element&#xff1a;是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库&…

深入理解 Go 语言中的字符串不可变性与底层实现

文章目录 前言1 字符串类型的数据结构组成2 为什么要这么设计数据结构&#xff1f;3 为什么说字符串类型不可修改&#xff1f;4 如何实现字符串的修改&#xff1f;5 为什么字符串修改的字面量用单引号&#xff1f;6 如何判断字符串的修改新建了一个字符串&#xff1f;7 字符串的…

c基础 - 输入输出

目录 一.scanf() 和 printf() 函数 1.printf 2.scanf 二 . getchar() & putchar() 函数 1.int getchar(void) 2.int putchar(int c) 三. gets() & puts() 函数 一.scanf() 和 printf() 函数 #include <stdio.h> 需要引入头文件,stdio.h 1.printf print…

【动力电池的四种冷却方式】

文章目录 动力电池的四种冷却方式1.自然冷却2.风冷3.液冷4.直冷 动力电池的四种冷却方式 目前动力电池系统的热管理主要可分为四类&#xff0c;自然冷却、风冷、液冷、直冷。其中自然冷却是被动式的热管理方式&#xff0c;而风冷、液冷、直流是主动式的&#xff0c;这三者的主…

[运维|数据库] deepin V20.9 安装人大金仓数据库

系统环境 系统&#xff1a; deepin V20.9 安装 以KingbaseES_V008R006C008B0014_Lin64_install.iso示例安装人大金仓数据库 下载镜像 镜像下载地址 下载授权文件 授权文件下载地址 挂在镜像 sudo mount -o loop KingbaseES_V008R006C008B0014_Lin64_install.iso /mnt执行…

el-tree常用操作

一、定义 <el-treeclass"myTreeClass":data"dirTreeData":props"dirTreeProps":filter-node-method"filterDirTree":expand-on-click-node"false"node-key"id"node-click"dirTreeNodeClick":allow-…