前端小技巧：利用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小時內與您取得聯系。