Blob对象实现文件上传下载示例详解

 更新时间:2023年1月6日 14:47  点击:50 作者:摸鱼的汤姆

什么是Blod?

Blob 对象表示一个不可变、原始数据的类文件对象,它的数据类型可以按文本或二进制的格式进行读取

Blob的属性与方法

  • size返回一个File对象所指代的文件的大小,单位为字节
  • typeBlob 对象的 type 属性给出文件的 MIME 类型。如果类型无法确定,则返回空字符串。
  • arrayBuffer()arrayBuffer() 方法返回一个 Promise 对象,包含 blob 中的数据,并在 ArrayBuffer 中以二进制数据的形式呈现。
  • slice()Blob.slice() 方法用于创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象可以用于大文件上传;
  • stream()Blob接口的stream() 方法返回一个ReadableStream对象,读取它将返回包含在Blob中的数据。
  • text()text() 方法返回一个 Promise 对象,包含 blob 中的内容,使用 UTF-8 格式编码
  • File 文件(File)接口提供有关文件的信息,并允许网页中的 JavaScript 访问其内容

File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。比如说, FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 都能处理 Blob 和 File

  • FileList 一个 FileList 对象通常来自于一个 HTML <input> 元素的 files 属性,你可以通过这个对象访问到用户所选择的文件
  • FileReader FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据
  • FileReaderSyncFileReaderSync接口允许以同步的方式读取File或Blob对象中的内容

使用

var domstr = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
var Blob = new Blob(domstr, {type : 'text/html'}); // 得到 blob

domstr 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8type,默认值为 "",它代表了将会被放入到blob中的数组内容的MIME类型。到这里相信大家都对Blod应该都了解了,开始实践案例:

Blod下载指定类型文件

指定下载一个html页面,如果想下载其他文件请在type下指定即可

let str = `<a id="a"><b id="b">hey!</b></a>`;
function downloadHtml(str){
     let blob = new Blob({str},{
        type:'text/html'
     })
     let url = URL.createObjectURL(blob);
     let Doma = document.createElement('a');
     Doma.setAttribute('download','index.html');
     Doma.setAttribute('href',url);
     Doma.click();  // 触发事件
     Doma.remove(); // 移除本身
}
downloadHtml(str)

Blod对象中type值根据自己下载的文件MIME类型进行定义,上面已经介绍过,然后创建a标签,当a标签上存在download属性的时候,那href的地址就会变为下载地址,再使用createObjectURL可以将blob对象转化为url,触发a标签实现下载功能

上传

  • createObjectURL同步方式读取

<input type="file" id="input" >
// js
let input = document.getElementsById('input');
input.onchange = (e)=>{
     const files = e.target.files[0];
     console.log(files)
     let url = URL.createObjectURL(files);
     let img = new Image();
     img.src = url;
     body.appendChild(img)
}

看一下打印的files对象与url地址

  • 我们会发现上传的文件的原型链上存在Blob,说明继承Blob,url的地址是存在映射的,当我们上传了文件后会被存储起来,而他后面的UUid对应的就是我们上传图片的内存地址,这样我们再页面上就可以看到效果了。

FileReader对象的异步方式读取

首先先介绍一下 FileReader对象

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。官方提示FileReader仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件;

FileReader常用属性与方法

  • FileReader.readyState 状态:0还没有加载任何数据,1数据正在被加载.,2已完成全部的读取请求.
  • FileReader.result 文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。
  • FileReader.onabort 该事件在读取操作被中断时触发
  • FileReader.onerror 该事件在读取操作发生错误时触发。
  • FileReader.onload 该事件在读取操作完成时触发。
  • FileReader.onloadstart 该事件在读取操作开始时触发。
  • FileReader.onloadend 该事件在读取操作结束时(要么成功,要么失败)触发。
  • FileReader.onprogress 该事件在读取Blob时触发。;

还有一些方法就不每个介绍了,想深入了解的点击,我们先看下面的例子:

// html
<input type="file" id="input" >
// js
let input = document.getElementById('input');
input.onchange = (e)=>{
     const files = e.target.files[0];
     console.log(files)
     let reader = new FileReader();
     let img = new Image();
     reader.readAsDataURL(files);
     reader.onload = function(){
        //读取完毕后输出结果
        img.src = this.result;
        console.log(this.result);
     }
     document.body.appendChild(img);
}

  • 当我们触发input的onchange事件之后直接获取files并读取文件,在创建Img对象,将获取的内容赋给img.src再将img追加在body,就可以达到浏览效果了。
  • 生成的图片地址是base64的

  • 效果图

总结

Blob对于上传与下载用途都很广泛,所有上传的对象都继承了Blob,所以上传后的文件都是只读的,但是可以通过Blob对文件进行切割实现大文件分片上传,断点续传等操作,下篇文章主要讲述如何实现分片上传,断点续传。关于Blob介绍与使用就说这么多了,更多关于Blob对象实现文件上传下载的资料请关注猪先飞其它相关文章!

原文出处:https://juejin.cn/post/7073437054520033287

相关文章

  • java8如何用Stream查List对象某属性是否有重复

    这篇文章主要介绍了java8如何用Stream查List对象某属性是否有重复的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-11
  • R语言 如何删除指定变量或对象

    这篇文章主要介绍了R语言删除指定变量或对象的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
  • Php文件上传类class.upload.php用法示例

    本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
  • PHP文件上传一些小收获

    又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
  • php文件上传你必须知道的几点

    本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
  • php实现文件下载实例分享

    举一个案例:复制代码 代码如下:<?phpclass Downfile { function downserver($file_name){$file_path = "./img/".$file_name;//转码,文件名转为gb2312解决中文乱码$file_name = iconv("utf-8","gb2312",$file_name...2014-06-07
  • 如何在Spring WebFlux的任何地方获取Request对象

    这篇文章主要介绍了如何在Spring WebFlux的任何地方获取Request对象,帮助大家更好的理解和使用springboot框架,感兴趣的朋友可以了解下...2021-01-26
  • 适用于初学者的简易PHP文件上传类

    本文实例讲述了PHP多文件上传类,分享给大家供大家参考。具体如下:<&#63;phpclass Test_Upload{ protected $_uploaded = array(); protected $_destination; protected $_max = 1024000; protected $_messages =...2015-10-30
  • js如何打印object对象

    js调试中经常会碰到输出的内容是对象而无法打印的时候,光靠alert只能打印出object标示,却不能打印出来里面的内容,甚是不方便,于是各方面整理总结了如下一个函数,能够将数组或者对象这类的结果一一打印出来,具体代码如下: fu...2015-10-21
  • jQuery实现简单的文件上传进度条效果

    本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
  • 在PHP中使用X-SendFile头让文件下载更快

    一般来说, 我们可以通过直接让URL指向一个位于Document Root下面的文件, 来引导用户下载文件.但是, 这样做, 就没办法做一些统计, 权限检查, 等等的工作. 于是, 很多时候, 我们采用让PHP来做转发, 为用户提供文件下载...2014-06-07
  • PHP利用APC模块实现大文件上传进度条的方法

    php 大文件带进度的上传,一直是一个令php程序员很苦恼的问题。查询baidu 、Google ,大体做带进度的上传方式为:flash+php,socket,apc+php等,下面我介绍了apc +php+ajax制作的带进度的上传,并贴出源码,希望对大家有用。 Altern...2015-10-30
  • 跟我学习javascript创建对象(类)的8种方法

    8中javascript创建对象(类)的方法,依依介绍给大家,希望大家喜欢。1. 使用Object构造函数来创建一个对象下面代码创建了一个person对象,并用两种方式打印出了Name的属性值。 var person = new Object(); person.name="k...2015-11-24
  • 牛叉的Jquery――Jquery与DOM对象的互相转换及DOM的三种操作

    只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作。这就需要我们知道如何将jQuery对象和DOM的相互转换的方法。1...2015-10-30
  • php需登录的文件上传管理系统

    本文给大家介绍一个不错的需要登录的php 文件上传管理系统,功能简单有需要了解的同学可参考。 代码如下<&#63;php$admin_pw="admin";//管理密码$uploaddir="upload";//上传目录session_start();if($_GET['action']=="g...2015-10-30
  • PHP文件上传主要代码讲解

    复制代码 代码如下:<?php if($_FILES['myfile']['name'] != '') { if($_FILES['myfile']['error'] > 0) { echo "错误状态:" . $_FILES['myfile']['error']; } else { move_uploaded_f...2013-10-04
  • 解决SpringCloud Feign传对象参数调用失败的问题

    这篇文章主要介绍了解决SpringCloud Feign传对象参数调用失败的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-06-24
  • asp.net html控件的File控件实现多文件上传实例分享

    asp.net中html控件的File控件实现多文件上传简单实例,开发工具vs2010使用c#语言,感兴趣的朋友可以了解下,必定是多文件上传值得学习,或许本文所提供的知识点对你有所帮助...2021-09-22
  • php 超大文件下载程序[http 缓存协商,Etag标记,断点续传]

    <?php教程 002 $file_path = './download/download_cn.rar'; 003 004 //使用方法 005 downFile($file_path); 006 007 // 服务器文件路径,下载文件名字(默认...2016-11-25
  • PHP的文件上传处理验证示例

    文件上传中有一块非常重要的就是安全验证了,如果验证不合理就很容易给一些人把此利用上传非常的黑客文件了,那么对于新学php新手文件上传验证有多了解呢?如果不懂可以看...2016-11-25