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

最新推荐文章于 2024-03-28 08:48:50 发布
最新推荐文章于 2024-03-28 08:48:50 发布
阅读量916 收藏 1
点赞数
分类专栏： js 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65402230/article/details/132164976
版权

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>

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

_聪明勇敢有力气
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
blob:Blob-文档
05-27
Blob-我是你的房子 作为家庭服务器，Blob 是用于智能建筑的车载计算机。 Blob将房屋的电气装置与计算机网络和Internet连接起来。 这样，无论位置在哪里，它都可以通过大量操作设备对智能建筑技术进行集中控制。 此外，可以将许多其他技术（例如门对讲机，摄像头和音频系统以及用于卫生，厨房和娱乐场所的第三方系统）无缝集成到楼宇控制系统中。 Blob旨在提供众多优势，例如移动技术控制的优势，以及最大的便利性，安全性和能源效率的全面体验。 同时，性感的Home Assistant界面通过轻松控制复杂的系统-只需一根手指，就使智能技术的控制成为一种乐趣。 目录 硬件 选择硬件时，我优先考虑的是节能系统。 通常，小型主板与相对较弱但省电的处理器的组合仍要优于通常使用的NAS设备。 看看性感的Inter-Tech X-608 Infinity Mirror RGB PC机箱，它的正面带有“
fetch-blob:Node.js 中的 Blob 实现，最初来自 node-fetch
07-23
获取-blob Node.js 中的 Blob 实现，最初来自 。 安装 npm install fetch-blob 从 2x 升级到 3x 从 2 更新到 3 应该是轻而易举的，因为 blob 规范没有太多变化。 主要版本的主要原因是编码标准。 - 内部 WeakMaps 被私有字段替换 - 内部 Buffer.from 被替换为 TextEncoder/Decoder - 内部缓冲区被替换为 Uint8Arrays - CommonJS 被替换为 ESM - 通过调用blob.stream()返回的节点流被替换为 whatwg 流 - （阅读“与其他 blob 的区别”了解更多信息。） 与其他 Blob 的区别 不同的NodeJS buffer.Blob （添加于：v15.7.0）和浏览器原生斑点这polyfilled版本无法通过PostMessage的发送 这个 blob 版本
PyPI 官网下载 | textblob-nl-0.0.1.tar.gz
01-16
资源来自pypi官网。 资源全名：textblob-nl-0.0.1.tar.gz
js如何获取图片url的Blob值并预览示例代码
01-21
前言 Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容，下面话不多说了，来一起看看详细的介绍吧 方法如下 1）使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) { var xhr = new XMLHttpRequest(); xhr.open(get, u
vue 里面 new Blob 流文件下载 完整步骤 直接享用，前端web前端开发
最新发布
m0_60607397的博客
03-28 499
/ content 这里要和后台确认可能会多包裹一层。Authorization: ‘token’ // 拿项目本地的token。// 释放URL 对象。
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用blob实现文件下载和图片预览
ouzexi的博客
03-20 1万+
学习blob对象的笔记 blob叫做二进制大对象(binary large object)主要是存放二进制的容器。 1 存取文本 存放二进制数据，类似数组size为数据长度，type指定类型 example： var str = 'hello world' var blob = new Blob([str], { type: 'text/plain' }) console.log('blob:', blob) 打印结果： 调用t
blob对象实现文件的下载和图片预览
xu568110526的博客
04-21 581
【代码】blob对象实现文件的下载和图片预览。
data:image/png；base64,iVBORw0KGg... 表示的是一张图片
热门推荐
海涛高软
03-01 2万+
FR:徐海涛（hunk Xu) QQ技术交流群：386476712
关于加密blob图片下载
E.N.Edward
04-19 698
上期讲过如何把图片加密，这期讲讲如何把blob给转为图片下载（请合法使用，如有侵权后果自负）
js将图片/文件等资源保存(下载)到本地
云帆的博客
08-11 6187
js将图片/文件等资源保存(下载)到本地。
下载和预览文件 ---使用blob二进制大对象
m0_58709757的博客
03-28 1156
下载和预览文件 ---使用blob二进制大对象
利用blob对象预览将上传的图片
叹之
12-25 577
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blob Test</title> <script> function handleFile(e) { // 取得文件并生成blob流 var file = e.files[0];
上传图片前不上传预览？
wangjinbao5566的博客
08-31 353
//下面用于图片上传预览功能             function setImagePreview(avalue) {                 var docObj = document.getElementById("doc");                 var imgObjPreview = document.getElementById("preview");  
【blob图片预览】后端返回blob格式图片，前端进行展示
六耳石猴的博客
06-15 1906
【代码】【blob图片预览】后端返回blob格式图片，前端进行展示。
js图片下载方式
weixin_49523082的博客
08-22 867
一、文件流格式下载。
Blob 对象实现文件预览下载
望京十三兄的博客
11-07 263
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。官方关于blob的介绍。文件预览 （wps）
前端下载文件(Blob)的几种方式使用Blob下载文件
qq2754289818的博客
05-23 1万+
前端下载文件(Blob)的几种方式使用Blob下载文件 a链接 location的href window.open 使用blob文件流下载 1.直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等）2.返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果 excel 等）第一种方式比较简单，但是使用场景有限。第二种方式通用性更好。
js实现文件上传预览
m0_38051458的博客
08-03 1048
【代码】js实现文件上传预览。
Vue pdf blob 文件流 pdfjs-dist 预览
09-25
对于在Vue中使用pdf.js-dist预览blob文件流的问题，你可以按照以下步骤进行操作： 1. 安装pdf.js-dist库： ```shell npm install pdfjs-dist ``` 2. 在Vue组件中引入pdf.js-dist库： ```javascript import pdfjsLib from 'pdfjs-dist' ``` 3. 创建一个方法来加载并预览blob文件流： ```javascript async loadBlobPdf(blob) { const loadingTask = pdfjsLib.getDocument({ data: blob }) const pdf = await loadingTask.promise const pageNumber = 1 const page = await pdf.getPage(pageNumber) const scale = 1.5 const viewport = page.getViewport({ scale }) const canvas = this.$refs.pdfCanvas const context = canvas.getContext('2d') canvas.height = viewport.height canvas.width = viewport.width const renderContext = { canvasContext: context, viewport: viewport } await page.render(renderContext) } ``` 4. 在模板中使用canvas元素来显示pdf： ```html <canvas ref="pdfCanvas"></canvas> ``` 5. 调用loadBlobPdf方法并传入blob文件流： ```javascript const response = await fetch('your_blob_file_url') const blob = await response.blob() this.loadBlobPdf(blob) ``` 以上步骤会将blob文件流加载并在canvas中预览。记得将'your_blob_file_url'替换为实际的blob文件的URL。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_聪明勇敢有力气

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值