這篇文章主要介紹了Vue2.0結(jié)合webuploader如何實(shí)現(xiàn)文件分片上傳功能,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
為安寧等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及安寧網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、安寧網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
Vue項(xiàng)目中遇到了大文件分片上傳的問(wèn)題,之前用過(guò)webuploader,索性就把Vue2.0與webuploader結(jié)合起來(lái)使用,封裝了一個(gè)vue的上傳組件,使用起來(lái)也比較舒爽。
上傳就上傳吧,為什么搞得那么麻煩,用分片上傳?
分片與并發(fā)結(jié)合,將一個(gè)大文件分割成多塊,并發(fā)上傳,極大地提高大文件的上傳速度。
當(dāng)網(wǎng)絡(luò)問(wèn)題導(dǎo)致傳輸錯(cuò)誤時(shí),只需要重傳出錯(cuò)分片,而不是整個(gè)文件。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。
實(shí)現(xiàn)后的界面:
主要是兩個(gè)文件,封裝的上傳組件和具體的ui頁(yè)面,上傳組件代碼下面有列出來(lái)。這兩個(gè)頁(yè)面的代碼放到github上了: https://github.com/shady-xia/Blog/tree/master/vue-webuploader 。
在項(xiàng)目中引入webuploader
1.先在系統(tǒng)中引入jquery(插件基于jq,坑爹啊?。?,如果你不知道放哪,那就放到 index.html 中。
2.在 官網(wǎng) 上下載 Uploader.swf
和 webuploader.min.js
,可以放到項(xiàng)目靜態(tài)目錄 static 下面;在 index.html 中引入webuploader.min.js。
(無(wú)需單獨(dú)再引入 webuploader.css ,因?yàn)闆](méi)有幾行css,我們可以復(fù)制到vue組件中。) <script src="/static/lib/jquery-2.2.3.min.js"></script> <script src="/static/lib/webuploader/webuploader.min.js"></script>
需要注意的點(diǎn):
1.在vue組件中,通過(guò) import './webuploader'
; 的方式引入webuploader
,會(huì)報(bào)''caller', 'callee', and 'arguments' properties may not be accessed on strict mode ...'的錯(cuò), 這是因?yàn)槟愕腷abel使用了嚴(yán)格模式,而caller這些在嚴(yán)格模式下禁止使用。所以 可以直接在index.html
中引入webuploader.js
,或者手動(dòng)去解決babel中'use strict'的問(wèn)題。
基于webuploader封裝Vue組件
封裝好的組件upload.vue如下,接口可以根據(jù)具體的業(yè)務(wù)進(jìn)行擴(kuò)展。
注意:功能和ui分離,此組建封裝好了基本的功能,沒(méi)有提供ui,ui在具體的頁(yè)面上去實(shí)現(xiàn)。
<template> <div class="upload"> </div> </template> <script> export default { name: 'vue-upload', props: { accept: { type: Object, default: null, }, // 上傳地址 url: { type: String, default: '', }, // 上傳最大數(shù)量 默認(rèn)為100 fileNumLimit: { type: Number, default: 100, }, // 大小限制 默認(rèn)2M fileSingleSizeLimit: { type: Number, default: 2048000, }, // 上傳時(shí)傳給后端的參數(shù),一般為token,key等 formData: { type: Object, default: null }, // 生成formData中文件的key,下面只是個(gè)例子,具體哪種形式和后端商議 keyGenerator: { type: Function, default(file) { const currentTime = new Date().getTime(); const key = `${currentTime}.${file.name}`; return key; }, }, multiple: { type: Boolean, default: false, }, // 上傳按鈕ID uploadButton: { type: String, default: '', }, }, data() { return { uploader: null }; }, mounted() { this.initWebUpload(); }, methods: { initWebUpload() { this.uploader = WebUploader.create({ auto: true, // 選完文件后,是否自動(dòng)上傳 swf: '/static/lib/webuploader/Uploader.swf', // swf文件路徑 server: this.url, // 文件接收服務(wù)端 pick: { id: this.uploadButton, // 選擇文件的按鈕 multiple: this.multiple, // 是否多文件上傳 默認(rèn)false label: '', }, accept: this.getAccept(this.accept), // 允許選擇文件格式。 threads: 3, fileNumLimit: this.fileNumLimit, // 限制上傳個(gè)數(shù) //fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制單個(gè)上傳圖片的大小 formData: this.formData, // 上傳所需參數(shù) chunked: true, //分片上傳 chunkSize: 2048000, //分片大小 duplicate: true, // 重復(fù)上傳 }); // 當(dāng)有文件被添加進(jìn)隊(duì)列的時(shí)候,添加到頁(yè)面預(yù)覽 this.uploader.on('fileQueued', (file) => { this.$emit('fileChange', file); }); this.uploader.on('uploadStart', (file) => { // 在這里可以準(zhǔn)備好formData的數(shù)據(jù) //this.uploader.options.formData.key = this.keyGenerator(file); }); // 文件上傳過(guò)程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。 this.uploader.on('uploadProgress', (file, percentage) => { this.$emit('progress', file, percentage); }); this.uploader.on('uploadSuccess', (file, response) => { this.$emit('success', file, response); }); this.uploader.on('uploadError', (file, reason) => { console.error(reason); this.$emit('uploadError', file, reason); }); this.uploader.on('error', (type) => { let errorMessage = ''; if (type === 'F_EXCEED_SIZE') { errorMessage = `文件大小不能超過(guò)${this.fileSingleSizeLimit / (1024 * 1000)}M`; } else if (type === 'Q_EXCEED_NUM_LIMIT') { errorMessage = '文件上傳已達(dá)到最大上限數(shù)'; } else { errorMessage = `上傳出錯(cuò)!請(qǐng)檢查后重新上傳!錯(cuò)誤代碼${type}`; } console.error(errorMessage); this.$emit('error', errorMessage); }); this.uploader.on('uploadComplete', (file, response) => { this.$emit('complete', file, response); }); }, upload(file) { this.uploader.upload(file); }, stop(file) { this.uploader.stop(file); }, // 取消并中斷文件上傳 cancelFile(file) { this.uploader.cancelFile(file); }, // 在隊(duì)列中移除文件 removeFile(file, bool) { this.uploader.removeFile(file, bool); }, getAccept(accept) { switch (accept) { case 'text': return { title: 'Texts', exteensions: 'doc,docx,xls,xlsx,ppt,pptx,pdf,txt', mimeTypes: '.doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt' }; break; case 'video': return { title: 'Videos', exteensions: 'mp4', mimeTypes: '.mp4' }; break; case 'image': return { title: 'Images', exteensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: '.gif,.jpg,.jpeg,.bmp,.png' }; break; default: return accept } }, }, }; </script> <style lang="scss"> // 直接把官方的css粘過(guò)來(lái)就行了 </style>
使用封裝好的上傳組件
新建頁(yè)面,使用例子如下:
ui需要自己去實(shí)現(xiàn)。 大概的代碼可以點(diǎn)這里 。
<vue-upload ref="uploader" url="xxxxxx" uploadButton="#filePicker" multiple @fileChange="fileChange" @progress="onProgress" @success="onSuccess" ></vue-upload>
分片的原理及流程
當(dāng)我們上傳一個(gè)大文件時(shí),會(huì)被插件分片,ajax請(qǐng)求如下:
1.多個(gè)upload請(qǐng)求均為分片的請(qǐng)求,把大文件分成多個(gè)小份一次一次向服務(wù)器傳遞
2.分片完成后,即upload完成后,需要向服務(wù)器傳遞一個(gè)merge請(qǐng)求,讓服務(wù)器將多個(gè)分片文件合成一個(gè)文件
分片
可以看到發(fā)起了多次 upload 的請(qǐng)求,我們來(lái)看看 upload 發(fā)送的具體參數(shù):
第一個(gè)配置( content-disposition
)中的 guid 和第二個(gè)配置中的 access_token ,是我們通過(guò)webuploader配置里的 formData ,即傳遞給服務(wù)器的參數(shù)
后面幾個(gè)配置是文件內(nèi)容,id、name、type、size等
其中 chunks 為總分片數(shù), chunk 為當(dāng)前第幾個(gè)分片。圖片中分別為12和9。當(dāng)你看到chunk是11的upload請(qǐng)求時(shí),代表這是最后一個(gè)upload請(qǐng)求了。
合并
分片后,文件還未整合,數(shù)據(jù)大概是下面這個(gè)樣子:
做完了分片后,其實(shí)工作還沒(méi)完,我們還要再發(fā)送個(gè)ajax請(qǐng)求給服務(wù)器,告訴他把我們上傳的幾個(gè)分片合并成一個(gè)完整的文件。
我怎么知道分片上傳完了,我在何時(shí)做合并?
webuploader
插件有一個(gè)事件是 uploadSuccess
,包含兩個(gè)參數(shù), file 和后臺(tái)返回的 response ;當(dāng)所有分片上傳完畢,該事件會(huì)被觸發(fā),
我們可以通過(guò)服務(wù)器返回的字段來(lái)判斷是否要做合并了。
比如后臺(tái)返回了 needMerge ,我們看到它是 true 的時(shí)候,就可以發(fā)送合并的請(qǐng)求了。
存在的已知問(wèn)題
在做單文件暫停與繼續(xù)上傳時(shí),發(fā)現(xiàn)了這個(gè)插件的bug:
1、當(dāng)設(shè)置的 threads>1
,使用單文件上傳功能,即stop方法傳入file時(shí),會(huì)報(bào)錯(cuò) Uncaught TypeError: Cannot read property 'file' of undefined
出錯(cuò)的源碼如下:這是因?yàn)闀和r(shí)為了讓下一個(gè)文件繼續(xù)傳輸,會(huì)將當(dāng)前的pool池中pop掉暫停的文件流。這里做了循環(huán),最后一次循環(huán)的時(shí)候,v是undefined的。
2、設(shè)置的threads為1,能正常暫停,但是暫停后再繼續(xù)上傳是失敗的。
原理和上一個(gè)一樣,暫停時(shí)把當(dāng)前文件流在 pool 中全部 pop 了,當(dāng)文件開(kāi)始 upload 的時(shí)候,會(huì)檢查當(dāng)期 pool ,而此時(shí)已經(jīng)沒(méi)有之前暫停的文件流了。
如果是針對(duì)所有文件整體的暫停和繼續(xù),功能是正常的。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Vue2.0結(jié)合webuploader如何實(shí)現(xiàn)文件分片上傳功能”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
網(wǎng)站題目:Vue2.0結(jié)合webuploader如何實(shí)現(xiàn)文件分片上傳功能
URL鏈接:http://bm7419.com/article46/jcsieg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、面包屑導(dǎo)航、企業(yè)網(wǎng)站制作、云服務(wù)器、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)