Blob的一些使用 - 下载、图片预览、切片上传

news2024/10/7 12:25:50

Blob

Blob: 前端专门用于支持文件操作的二进制对象
File: 一种特殊的Blob对象

文件下载

<!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>
	<a id="a1">点击下载</a>
	<script>
		// 获取a标签的dom
		const a1 = document.getElementById("a1");
		const content = '<div><h1>JS++</h1><p>Hello</p></div>'
		const blob = new Blob()
		console.log(blob)
	</script>
</body>
</html>

在这里插入图片描述

我们可以看到blob对象第一个参数需要一个数组，第二个参数是对blob对象的描述
所以对其进行传参

<!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>
	<a id="a1">点击下载</a>
	<script>
		// 获取a标签的dom
		const a1 = document.getElementById("a1");
		const content = '<div><h1>JS++</h1><p>Hello</p></div>'
		const blob = new Blob([content], {
			type: 'text/html'
		})
		URL.createObjectURL()
	</script>
</body>

</html>

我们通过URL.createObjectURL可以生成一个url地址 ，此方法需要一个blob对象
在这里插入图片描述

此时我们给a标签设置href连接

<!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>
	<a id="a1">点击下载</a>
	<script>
		// 获取a标签的dom
		const a1 = document.getElementById("a1");
		const content = '<div><h1>JS++</h1><p>Hello</p></div>'
		const blob = new Blob([content], {
			type: 'text/html'
		})
		a1.href = URL.createObjectURL(blob)
		a1.setAttribute('download', '下载.html')
	</script>
</body>

</html>

此时点击下载就可以成功下载并预览
在这里插入图片描述
在这里插入图片描述

文件预览

<!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 type="file" id="fileInput">
	<script>
		const fileInput = document.getElementById("fileInput")
		fileInput.addEventListener('change', (e) => {
			console.log(e.target.files);
		})
	</script>
</body>

</html>

我们可以看到e.target.files表示文件对象

<!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 type="file" id="fileInput">
	<script>
		const fileInput = document.getElementById("fileInput")
		fileInput.addEventListener('change', (e) => {
			const file = e.target.files[0];
			const fileReader = new FileReader();
			// 生成base64图片
			fileReader.readAsDataURL(file)
			fileReader.onload = function () {
				console.log(fileReader.result)
			}
		})
	</script>
</body>

</html>

在这里插入图片描述这里先使用fileReader来实现预览功能
在这里插入图片描述

<!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 type="file" id="fileInput">
	<script>
		const fileInput = document.getElementById("fileInput")
		fileInput.addEventListener('change', (e) => {
			const file = e.target.files[0];
			const fileReader = new FileReader();
			// 生成base64图片
			fileReader.readAsDataURL(file)
			fileReader.onload = function () {
				const src = fileReader.result;
				const img = document.createElement("img");
				img.src = src
				document.body.appendChild(img);
			}
		})
	</script>
</body>

</html>

在这里插入图片描述

<!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 type="file" id="fileInput">
	<script>
		const fileInput = document.getElementById("fileInput")
		fileInput.addEventListener('change', (e) => {
			const file = e.target.files[0];
			const url = URL.createObjectURL(file)
			const img = document.createElement("img");
			img.src = url
			document.body.appendChild(img);
			// 销毁临时的url
			img.onload = function () {
				URL.revokeObjectURL(url);
			}
		})
	</script>
</body>

</html>

在这里插入图片描述

分片上传

我们先使用koa开启一个服务器

npm init -y 初始项目
npm install koa koa-router koa-static koa-bodyparser

const Koa = require('koa')
const Router = require('koa-router')
const static = require('koa-static')
const parser = require('koa-bodyparser')

const app = new Koa()

app.listen(3000, () => {
	console.log('server listen at port 3000')
})

npm install nodemon -g

配置脚本
在这里插入图片描述
在这里插入图片描述
运行

npm run dev

在这里插入图片描述
koa-parser用来处理post请求
koa-static用来创建静态资源

const Koa = require('koa')
const Router = require('koa-router')
const server = require('koa-static')
const Parser = require('koa-bodyparser')

const app = new Koa()

// 注册Parser中间件 就可以解析post过来的body数据
app.use(Parser())

// 使用server中间件 可以将文件夹作为静态文件目录
app.use(server(__dirname + '/public'))


app.listen(3000, () => {
	console.log('server listen at port 3000')
})

multiparty将上传文件保存到临时目录

const Koa = require('koa')
const Router = require('koa-router')
const server = require('koa-static')
const Parser = require('koa-bodyparser')
const multiparty = require('multiparty')

const app = new Koa()
const router = new Router()

// 注册Parser中间件 就可以解析post过来的body数据
app.use(Parser())

// 使用server中间件 可以将文件夹作为静态文件目录
app.use(server(__dirname + '/public'))

router.post('/upload', async (ctx, next) => {
	const form = new multiparty.Form({ uploadDir: 'temp' })
	ctx.body = '上传成功'
})

app.use(router.routes())

app.listen(3000, () => {
	console.log('server listen at port 3000')
})

增加上传功能

<!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 type="file" id="file1" />
	<button id="btn1">上传</button>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
	<script>
		const btn1 = document.getElementById('btn1');
		btn1.addEventListener('click', () => {
			const file1 = document.getElementById('file1');
			const file = file1.files[0]
			const formData = new FormData()
			formData.append('file', file)

			axios.post('/upload', formData)
		})
	</script>
</body>

</html>

const Koa = require('koa')
const Router = require('koa-router')
const server = require('koa-static')
const Parser = require('koa-bodyparser')
const multiparty = require('multiparty')

const app = new Koa()
const router = new Router()

// 注册Parser中间件 就可以解析post过来的body数据
app.use(Parser())

// 使用server中间件 可以将文件夹作为静态文件目录
app.use(server(__dirname + '/public'))

router.post('/upload', async (ctx, next) => {
	const form = new multiparty.Form({ uploadDir: 'temp' })
	form.parse(ctx.req)
	form.on('file', () => {
		
	})
	ctx.body = '上传成功'
})

app.use(router.routes())

app.listen(3000, () => {
	console.log('server listen at port 3000')
})

在这里插入图片描述

在这里插入图片描述

分片上传

<!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 type="file" id="file1" />
	<button id="btn1">上传</button>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
	<script>
		const btn1 = document.getElementById('btn1');

		//10 kb
		const chunkSize = 1034 * 10
		let index = 0

		btn1.addEventListener('click', upload)

		function upload() {
			const file1 = document.getElementById('file1');
			const file = file1.files[0]
			// 解构出文件名和扩展名
			const [filename, fileext] = file.name.split('.')
			// 获取文件大小
			const fileSize = file.size

			let start = index * chunkSize
			// 如果切片初始值 大于文件大小 就不切片
			if (start > fileSize) {
				return
			}
			const blob = file.slice(start, start + chunkSize)
			const blobName = `${filename}.${index}.${fileext}`
			const blobFile = new File([blob], blobName)

			const formData = new FormData()
			formData.append('file', blobFile)
			axios.post('/upload', formData).then(() => {
				index++
				// 递归发送请求
				upload(index)
			})
		}
	</script>
</body>

</html>

分片上传成功
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Qt应用开发(基础篇)——信号槽 Signals and Slots

Qt应用开发(基础篇)——信号槽 Signals and Slots

一、前言 Qt成为我们今天拥有的灵活而舒适的工具&#xff0c;除了友好和能够快速开发设计师界面&#xff0c;信号槽机制是最大的核心特征&#xff0c;也是区别于其他开发框架最大的优势。 Qt的信号槽作用于两个对象之间的通信。当一个对象发生了改变&#xff0c;它希望其他关心…
阅读更多...
Windows下安装 Redis

Windows下安装 Redis

目录 1.下载 1.1.Redis官网 1.2.github下载地址 2.安装步骤 2.1.解压Redis压缩包 2.2.创建临时服务 2.3.启动客户端 2.4.注册Redis服务 3.总结 4.致谢 1.下载 1.1.Redis官网 Download | Redis Redis 官方网站没有提供 Windows 版的安装包&#xff0c;但可以通过…
阅读更多...
Django实现音乐网站 ⑻

Django实现音乐网站 ⑻

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是后台对单曲原有功能的基础上进行部分功能实现和显示优化。 目录 新增编辑 歌手下拉显示修改 设置歌曲时长 安装eyed3库 获取mp3时长 歌曲时长字段修改 重写save方法 增加歌手单曲数量 查询歌手单曲数量 …
阅读更多...
算法通关村——二分查找在拓展中的应用

算法通关村——二分查找在拓展中的应用

1. 山脉数组的峰顶索引 山脉数组的峰顶索引 符合下列属性的数组 arr 称为 山脉数组 &#xff1a; arr.length > 3 存在 i&#xff08;0 < i < arr.length - 1&#xff09;使得&#xff1a; arr[0] < arr[1] < … arr[i-1] < arr[i] arr[i] > arr[i1] >…
阅读更多...
企业计算机被_locked勒索病毒攻击如何处理及后期如何做好预防工作

企业计算机被_locked勒索病毒攻击如何处理及后期如何做好预防工作

随着信息技术的普及和不断发展&#xff0c;勒索病毒攻击已成为企业面临的一项严峻挑战。近期&#xff0c;山西某医药公司的计算机服务器被_locked勒索病毒攻击&#xff0c;导致企业的许多重要数据被加密&#xff0c;当发现企业的服务器被该勒索病毒攻击时&#xff0c;该企业的做…
阅读更多...
初识mysql数据库之引入mysql客户端库

初识mysql数据库之引入mysql客户端库

目录 一、下载第三方库 1. 准备工作 1. 使用mysql官网提供的库 2. yum源安装 二、测试第三方库是否可用 三、mysql常用接口介绍 1. 查看官方文档 2. 初始化 3. 关闭mysql 4. 连接mysql 5. 下达sql指令 四、一个简单的C客户端库连接mysql程序 1. 头文件 2. 初始化…
阅读更多...
maven 删除下载失败的包

maven 删除下载失败的包

本文介绍了当Maven包报红时&#xff0c;使用删除相关文件的方法来解决该问题。文章详细说明了_remote.repositories、.lastUpdated和_maven.repositories文件的作用&#xff0c;以及如何使用命令行删除这些文件。这些方法可以帮助开发者解决Maven包报红的问题&#xff0c;确保项…
阅读更多...
赛码网-圈地运动 100%AC代码（C）

赛码网-圈地运动 100%AC代码（C）

———————————————————————————————————— ⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩最近在准备秋招&#xff0c;一直在练习编程。 ⏩本篇文章对赛码网的圈地运动 题目做一…
阅读更多...
LeetCode 热题 100 JavaScript -- 74. 搜索二维矩阵

LeetCode 热题 100 JavaScript -- 74. 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非递减顺序排列。 每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 …
阅读更多...
迁移协调器：方法和模式

迁移协调器：方法和模式

Migration Coordinator &#xff08;迁移协调器&#xff09;是一款完全免费的工具&#xff0c;内置于 NSX Data Center 中&#xff0c;可帮助将NSX for vSphere迁移到 NSX&#xff08;又名 NSX-T&#xff09;。Migration Coordinator最初是在 NSX-T 2.4 中引入的&#xff0c;有…
阅读更多...
在外SSH远程连接Ubuntu系统

在外SSH远程连接Ubuntu系统

在外SSH远程连接Ubuntu系统【无公网IP】 文章目录 在外SSH远程连接Ubuntu系统【无公网IP】前言1. 在Ubuntu系统下安装cpolar软件2. 完成安装后打开cpolar客户端web—UI界面3. 创建隧道取得连接Ubuntu系统公网地址4. 打开Windows的命令界面并输入命令 前言 随着科技和经济的发展…
阅读更多...
RK3568 lunch新增设备

RK3568 lunch新增设备

rk3568 android9.0 &#xff0c;32位平台 1.进入devices/rockchip/rk356x/ 将rk3568_box_32 拷贝一份&#xff0c;命名为hdx6 2.打开vendorsetup.sh,添加lunch选项 add_lunch_combo hdx6-user add_lunch_combo hdx6-userdebug 3.进入hdx6&#xff0c;修改rk3568_box_32.mk…
阅读更多...
行业追踪，2023-08-08

行业追踪，2023-08-08

自动复盘 2023-08-08 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…
阅读更多...
C++ STL string类

C++ STL string类

目录 一.为什么学习string类 &#xff08;1&#xff09; C语言中的字符串 &#xff08;2&#xff09;标准库里面的string类 二. string类的常用接口说明 &#xff08;1&#xff09;string类对象的常见构造 &#xff08;2&#xff09;string类对象的容量操作 1.size(),le…
阅读更多...
2023年中期奶粉行业分析报告（京东数据开放平台）

2023年中期奶粉行业分析报告（京东数据开放平台）

根据国家统计局和民政部数据公布&#xff0c;2022年中国结婚登记数创造了1980年&#xff08;有数据公布&#xff09;以来的历史新低&#xff0c;共计683.3万对。相较于2013年巅峰时期的数据&#xff0c;2022年全国结婚登记对数已接近“腰斩”。 2023年“520”期间的结婚登记数…
阅读更多...
拖拽宫格vue-grid-layout详细应用及案例

拖拽宫格vue-grid-layout详细应用及案例

文章目录 1、前言2、安装3、属性4、事件5、占位符样式修改6、案例 1、前言 vue-grid-layout是一个适用于vue的拖拽栅格布局库&#xff0c;功能齐全&#xff0c;适用于拖拽高度/宽度自由调节的布局需求&#xff0c;本文将讲述一些常用参数和事件&#xff0c;以及做一个同步拖拽…
阅读更多...
[原创]从model-based推导到model-free(到PG+general advantage estimation)

[原创]从model-based推导到model-free(到PG+general advantage estimation)

前言 这篇博客很久之前就想做了&#xff0c;一直在拖是因为觉得自己对知识点理解还没有足够的透彻。但是每当去复盘基本概念的时候又很难理清逻辑&#xff0c;所以觉得即便现在半吊子水平&#xff0c;但是也想通过博客记录一下自己肤浅的学习心得&#xff0c;权当是为自己巩固…
阅读更多...
metersphere性能压测执行过程

metersphere性能压测执行过程

(1) 首先在controller层&#xff0c;通过RunTestPlanRequest接收请求参数 PostMapping("/run")public String run(RequestBody RunTestPlanRequest request) (2) 在PerformanceTestService中的run中进行具体的逻辑处理&#xff0c; 首先根据请求中ID来获取库中存储…
阅读更多...
128.【Maven】

128.【Maven】

Maven仓库 (一)、Maven 简介1.传统项目管理的缺点2.Maven是什么3.Maven的作用 (二)、Maven 的下载与安装1.下载与认识目录2.配置Maven的全局环境 (三)、Maven 的基础概念1.Maven 仓库(1).仓库分类 2. Maven 坐标3.Maven 本地仓库配置(1).改变默认的仓库地址(2).改变远程仓库地址…
阅读更多...
SpringWeb项目核心功能总结

SpringWeb项目核心功能总结

SpringWeb项目核心功能总结 文章目录 SpringWeb项目核心功能总结1.浏览器与Java程序的连接&#xff08;个人偏好使用RequestMapping&#xff09;2.参数的传入3.结果的返回请求转发和请求重定向的区别 核心功能用到的注解&#xff1a; RestControllerControllerResponseBodyRequ…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023