前端小技巧：利用Blob对象切片上传大文件

.什么是Blob对象？

Blob对象表示二进制文件的数据内容，并且可以操作二进制文件，因此它常用于读写文件。

Blob对象的构造函数Blob()由浏览器原生提供，实例化对象如下：

let blob=new Blob(["my name is martin"],{type:"application/json"})

可以看出，Blob构造函数接受两个参数。

第一个参数是数组，数组元素可以是字符串或二进制文件，用来表示Blob实例对象的数据内容。
第二个参数是配置对象，但是目前该对象只有一个type属性可提供配置，它的值是一个字符串，表示数据的MIME类型，默认是空字符串，关于MIME类型分类，可以参照以下这张表：

2.Blob对象的属性和方法

2.1Blob属性

废话不多说，先直接打印一个Blob对象给大家看看：

let blob=new Blob(["my name is martin"],{type:"application/json"});
console.log(blob);

可以看出，一个Blob实例对象包含两个属性：

size:表示数据的大小
type：表示数据的MIME类型

2.2Blob方法

Blob实例对象只有一个slice方法，这个方法和数组的slice方法很像，都是用来切割数据的，切割完返回一个相同类型的数据。这里返回的是一个Blob对象。

slice用法详解

yourBlob.slice(start, end, contentType);

可以看出Blob对象的slice方法包含三个参数:

start:切割起始位置（包含）
end：切割结束位置（不包含）
contentType:返回的新Blob对象的数据类型（默认为空字符串）

上个小例子帮大家理解一下：

切割文件简易版：

代码：

let blob=new Blob(["my name is martin"],{type:"application/json"});
let newBlob_1=blob.slice(0,3,"application/json");
let newBlob_2=blob.slice(3,blob.size,"application/json");
console.log(blob);
console.log(newBlob_1);
console.log(newBlob_2);

结果图：

分析：从结果图中可以看出，初始Blob对象大小为17，最后被切割成两个大小为3和14的Blob对象，如果将初始Blob对象的数据看成是一个文件，那么这段代码的作用就是直接将一个大文件分片成两个小文件了。

事实上，文件的分片原理就是这样，用Blob对象将文件分片是不是很简单。

3.如何使用Blob对象实现分片上传

上面说的都是Blob对象的基础知识点，这一part讲的工程实践应用才是重头戏。

3.1前置知识点

因为我们工程中很多是基于 <input type="file"> 这个文件选择器来上传文件的。

这个文件选择器返回的是一个FileList类数组对象，其中数组中的每个元素都是一个File实例对象。

而这个File对象其实就是一个特殊的Blob对象实例，它除了继承了Blob对象所有的属性和方法，还新增了name和lastModifiedDate这两个属性。

File对象用法示例：

 let file=new File(["my name is martin"],"myFile",{type:"text/plain",lastModified:new Date()})
 console.log(file);
//File构造函数接受三个参数:
//第一个参数是数组，表示数据内容 
//第二个参数是文件名
//第三个参数是一个对象，包含type和lastModified属性

3.2大文件分片上传实例（这段代码要着重理解）

废话不多说，先上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<input type="file" id="file" onchange="doupload(event)">
<script src="./jquery-2.2.0.min.js"></script>
<script>
 function upload(url,file,callback) {
 console.log("进入二级函数");
 let chunkSize=10*1024*1024; //分片大小
 let chunks=Math.ceil(file.size/chunkSize); //片数
 for(let i=0;i<chunks;i++){
 let fd=new FormData(); //关于FormData对象不理解的请看我的上一篇文章
 let start=i*chunkSize;
 let end=Math.min(chunkSize,file.size-start);
 let chunk=file.slice(start,end);
 fd.append("file",chunk);
 fd.append("fileName",chunk.name);
 fd.append("index",i);
 fd.append("totalSize",file.size);
 $.ajax({
 type:"POST",
 url:url,
 data:fd,
 contentType:false, //这里一定要设置成false
 processData: false,
 success:function (data) {
 console.log(`分片${i}送成功`);
 },
 error:function (err) {
 console.log(err);
 }
 })
 }
 }
 function doupload(e) {
 let url="localhost:5000/upload"; //上传的目标地址
 let file=e.target.files[0];
 console.log(file);
 upload(url,file,function (err,res) {
 if(err){
 console.log(err);
 }else{
 console.log("success");
 }
 })
 }
</script>
</body>
</html>

以上代码就实现了大文件的分片上传功能，具体运用到工程中的演示效果如下所示：

4.总结

大文件分片上传时，一般是使用Blob的特殊实例对象File来对文件进行切分，然后使用FormData对象来储存分片文件，最后利用ajax请求向服务端发送分片文件。对于FormData对象不了解的同学可以翻看我的FormData用法解析这一篇文章。

关注我，一起学习前端，共同从小白走向高级工程师。

inyMCE插入图片默认的是直接插入图片地址的，而通常我们希望能直接将图片上传至我们的服务器并返回图片的服务器地址，前面在vue实战024:Vue-Quill-Editor自定义图片上传中也提到了图片上传，原理是一样的。当我们选择图片后将图片上传服务器，服务器返回相应的图片链接，前端将图片链接插入到富文本的指定光标上位置，在提交富文本的内容的时候图片只是以图片地址提交。

TinyMCE提供了图片异步上传处理函数images_upload_handler让用户配置上传图片的相关参数，这里有三个参数，图片数据（blobinfo是一个对象，包含上传文件的信息），成功时的回调函数（success，上传成功的时候向success传入一个图片地址），失败时的回调函数（failure，失败的时候向 failure 传入报错信息），这里我们可以通过images_upload_handler来重新自定义一个上传方法以便适配我们的项目。

更改上传方法我们同样在tinymce的init中去配置，如果你直接在上文vue实战025:配置TinyMCE富文本编辑器中的init中添加images_upload_handler方法你会发现根本找不到$axios，因为axios需要在方法中调用。

所以这里我们需要重新来调整下tinymce的结构了，去掉模型中的init绑定，我们写个方法通过window.tinymce.init来配置init，然后在mounted调用该方法自动加载我们定义的配置信息，这时我们就必须挂载的tinymce对象才能正常显示编辑器（这里的DefaultInit就是我们之前在data中定义的init参数）。

methods: {
 init () {
 const self=this
 window.tinymce.init({
 // 默认配置
 ...this.DefaultInit,
 // 挂载的DOM对象
 selector: `#${this.tinymceId}`,
 })
 }
 }

然后我们就可以在init中重写我们的images_upload_handler方法了，这里我用的是vue，数据发送用的是axios，这里的方法跟我们前面说到的“Vue实战024:Vue-Quill-Editor自定义图片上传”一样，但是没那么麻烦，接受参数之后直接将图片的url传给success即可，tinymce会自动帮你插入到光标所在位置的。

// 图片上传
images_upload_handler: function (blobInfo, success, failure){
 let formData=new FormData()
 console.log(blobInfo.filename())
 formData.append('img',blobInfo.blob())
 self.$axios.post('http://127.0.0.1:8000/upload/',formData)
 .then(response=>{
 console.log(response.data['url'])
 if(response.data['code']==200){
 success(response.data['url'])
 }else{
 failure('上传失败！')
 }
 })

除了点击上传外，tinymce最大的亮点就是可以直接复制粘贴上传，这样大大方便了我们编写文章，要实现这个功能相当的简单，前面我们已经加载了paste插件, 接下来只需要在初始化中插入配置项即可（粘贴后会自动调用图片上传接口将图片传至服务器中）:

paste_data_images: true, // 设置为“true”即允许粘贴图像，而将其设置为“false”则不允许粘贴图像。

打开我们的后台，可以在图片存储路径中找到对应的图片信息，tinymce将图片自动上传至服务器了，是不是相当的方便快捷。

下面是到目前为止的完整代码，后续继续优化和完善。

UE项目中的TINYMCE富文本编辑器如何从WORD中粘贴图片上传到七牛云，富文本插件TINYMCE使用CTRL+V粘贴图片上传到远程服务器，关于tinymce粘贴图片，粘贴word，一键导入word，粘贴word内容，网上能找到的方案不是特别多，都是通过HTML5提供的API来实现的。

粘贴word内容，粘贴word图片，粘贴word图文，

之前在网上也找过相关的资料，论坛里面也有网友交流过，也加过一些交流群，但是几乎都不能够提供成熟完整的商业解决方案。

大部分文章和回复都不太靠谱，基本上都是没有实际的项目应用经验。

复制word内容然后粘贴到tinymce富文本编辑器中，word里面的图片自动上传到服务器中，返回图片和文字HTML，保留word文字的样式，字体大小，字体颜色。

可以用快捷键（Ctrl+V）操作，

用户发布新闻的时候是从word里面复制图片和文字，然后将word图文内容粘贴到web富文本编辑器中，希望能够将word的图片自动上传到服务器中，服务器地址能够自定义，

后端的话需要支持任意开发语言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于标准HTTP协议的都要支持。如果能够不装控件最好，下载示例

https://gitee.com/xproer/wordpaster-vue-tinymce5

1.复制插件文件

安装jquery

npm install jquery

2.在组件中引入

添加工具栏

在线代码：https://gitee.com/xproer/wordpaster-vue-tinymce5/blob/master/src/components/tinymce.vue#L44

添加插件

在线代码：https://gitee.com/xproer/wordpaster-vue-tinymce5/blob/master/src/components/tinymce.vue

初始化wordpaster组件

3.在页面中引入组件

整合效果：

订阅版报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m
政企版报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/

年费版报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/

OEM版报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY

产品源代码：https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr

在线咨询

上一篇：你需要的13个移动应用开发平台
下一篇：HTML5的sessionStorage和local

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。