純前端實現(xiàn)： 切片上傳 斷點續(xù)傳 。斷點續(xù)傳需要在切上上傳的基礎(chǔ)上實現(xiàn)

前端之前上傳OSS，無需后端提供接口。先上完整代碼，直接復(fù)制，將new OSS里的參數(shù)修改成自己公司OSS相關(guān)信息后可用，如遇問題，請繼續(xù)往下看。

oss官方文檔

https://help.aliyun.com/document_detail/111268.html?spm=a2c4g.11186623.6.1111.5a583a07LknRUO

代碼允許所需環(huán)境：vue + element + ali-oss

安裝ali-oss： cnpm install ali-oss

代碼實現(xiàn)

<template> <div class='dashboard-editor-container'> <el-upload action='' ref='upload' :file-list='fileList' :limit='2' :on-change='handleChange' :on-remove='handleRemove' :auto-upload='false' accept='' > <el-button slot='trigger' size='small' type='primary'>選取文件</el-button> <el-button size='small' type='success' @click='submitForm'>上傳到服務(wù)器</el-button> <el-button size='small' type='success' @click='resumeUpload'>繼續(xù)</el-button> <el-button size='small' type='success' @click='stopUplosd'>暫停</el-button> <el-button size='small' type='success' @click='abortMultipartUpload'>清除切片</el-button> </el-upload> <el-progress :percentage='percentage' :status='uploadStatus'></el-progress> </div></template><script> let OSS = require(’ali-oss’) // 引入ali-oss插件 const client = new OSS({ region: ’oss-cn-shanghai’,//根據(jù)那你的Bucket地點來填寫 accessKeyId: ’LTA*********RaXY’,//自己賬戶的accessKeyId accessKeySecret: ’uu1************GiS’,//自己賬戶的accessKeySecret bucket: ’a******o’,//bucket名字 });export default { data () { return { fileList:[], file: null, tempCheckpoint: null, // 用來緩存當前切片內(nèi)容 uploadId: ’’, uploadStatus: null, // 進度條上傳狀態(tài) percentage: 0, // 進度條百分比 uploadName: ’’, //Object所在Bucket的完整路徑 } }, mounted() { // window.addEventListener(’online’, this.resumeUpload); }, methods: { // 點擊上傳至服務(wù)器 submitForm(file) { this.multipartUpload(); }, // 取消分片上傳事件 async abortMultipartUpload() { window.removeEventListener(’online’, this.resumeUpload) const name = this.uploadName; // Object所在Bucket的完整路徑。 const uploadId = this.upload; // 分片上傳uploadId。 const result = await client.abortMultipartUpload(name, uploadId); console.log(result, ’=======清除切片====’); }, // 暫停分片上傳。 stopUplosd () { window.removeEventListener(’online’, this.resumeUpload) // 暫停時清除時間監(jiān)聽 let result = client.cancel(); console.log( result, ’---------暫停上傳-----------’) }, // 切片上傳 async multipartUpload () { if (!this.file) { this.$message.error(’請選擇文件’) return } this.uploadStatus = null // console.log('this.uploadStatus',this.file, this.uploadStatus); this.percentage = 0 try { //object-name可以自定義為文件名（例如file.txt）或目錄（例如abc/test/file.txt）的形式，實現(xiàn)將文件上傳至當前Bucket或Bucket下的指定目錄。 let result = await client.multipartUpload(this.file.name, this.file, { headers: { ’Content-Disposition’: ’inline’, ’Content-Type’: this.file.type //注意：根據(jù)圖片或者文件的后綴來設(shè)置，我試驗用的‘.png’的圖片，具體為什么下文解釋 }, progress: (p, checkpoint) => { this.tempCheckpoint = checkpoint; this.upload = checkpoint.uploadId this.uploadName = checkpoint.name this.percentage = p * 100 // console.log(p, checkpoint, this.percentage, ’---------uploadId-----------’) // 斷點記錄點。瀏覽器重啟后無法直接繼續(xù)上傳，您需要手動觸發(fā)上傳操作。 }, meta: { year: 2020, people: ’dev’ }, mime: this.file.type }); console.log(result, this.percentage, ’result= 切片上傳完畢=’); } catch (e) { window.addEventListener(’online’, this.resumeUpload) // 該監(jiān)聽放在斷網(wǎng)的異常處理 // 捕獲超時異常。 if (e.code === ’ConnectionTimeoutError’) { // 請求超時異常處理 this.uploadStatus = ’exception’ console.log('TimeoutError'); // do ConnectionTimeoutError operation } // console.log(e) } }, // 恢復(fù)上傳。 async resumeUpload () { window.removeEventListener(’online’, this.resumeUpload) if (!this.tempCheckpoint) { this.$message.error(’請先上傳’) return } this.uploadStatus = null try { let result = await client.multipartUpload(this.file.name, this.file, { headers: { ’Content-Disposition’: ’inline’, ’Content-Type’: this.file.type //注意：根據(jù)圖片或者文件的后綴來設(shè)置，我試驗用的‘.png’的圖片，具體為什么下文解釋 }, progress: (p, checkpoint) => { this.percentage = p * 100 console.log(p, checkpoint, ’checkpoint----恢復(fù)上傳的切片信息-------’) this.tempCheckpoint = checkpoint; }, checkpoint: this.tempCheckpoint, meta: { year: 2020, people: ’dev’ }, mime: this.file.type }) console.log(result, ’result-=-=-恢復(fù)上傳完畢’) } catch (e) { console.log(e, ’e-=-=-’); } }, // 選擇文件發(fā)生改變 handleChange(file, fileList) { this.fileList = fileList.filter(row => row.uid == file.uid) this.file = file.raw // 文件改變時上傳 // this.submitForm(file) }, handleRemove(file, fileList) { this.percentage = 0 //進度條置空 this.fileList = [] }, }}</script><style scoped></style>

如果相關(guān)依賴已經(jīng)安裝完畢，但是上述代碼操作時仍有報錯，請檢查以下問題

const client = new OSS({ region: ’oss-cn-shanghai’,//根據(jù)那你的Bucket地點來填寫 accessKeyId: ’LT******XY’,//自己賬戶的accessKeyId accessKeySecret: ’uu*********GiS’,//自己賬戶的accessKeySecret bucket: ’a******io’,//bucket名字 });

上述信息放在前端會存在安全問題，如在項目中使用盡量由后端接口提供?；蚴褂肧TS臨時授權(quán)。demo中沒有，請自行探索。https://www.alibabacloud.com/help/zh/doc-detail/100624.htm?spm=a2c63.p38356.879954.5.7a234d04IQpf5I#concept-xzh-nzk-2gb

配置項中信息可以問后端或者運維，bucket的名字必須是你OSS上存在的且你有權(quán)限訪問的，不然會一直報 Pleasr create a busket first或者一直報跨域

當遇到跨域時，或者遇到報報錯信息中有etag時，請檢查OSS配置，然后找有OSS服務(wù)器權(quán)限人員進行配置：

window.addEventListener(’online’, this.resumeUpload)用于監(jiān)聽網(wǎng)絡(luò)狀態(tài)（斷網(wǎng)狀態(tài)和連網(wǎng)狀態(tài)），實現(xiàn)斷網(wǎng)后恢復(fù)網(wǎng)絡(luò)自動上傳就必須設(shè)置監(jiān)聽。

window.removeEventListener(’online’, this.resumeUpload)取消監(jiān)聽。如果不設(shè)置取消監(jiān)聽，聯(lián)網(wǎng)狀態(tài)下會一直處于進行上傳，因為一直滿足監(jiān)聽條件`

headers: { ’Content-Disposition’: ’inline’, ’Content-Type’: this.file.type //注意：根據(jù)圖片或者文件的后綴來設(shè)置，我取得是文件的type，具體為什么下文解釋 },

’Content-Type’: this.file.type`的作用：加了在文件上傳完畢后，訪問文件鏈接時可以直接查看，否則會直接下載。

文件上傳完畢后查看，可以去resule.res.requestUrls中去取，但是注意要去點地址后面的 ?uploadId=******

上述代碼只是demo，代碼以實現(xiàn)功能為主，并不嚴謹，請自行完善。

到此這篇關(guān)于vue+element+oss實現(xiàn)前端分片上傳和斷點續(xù)傳的文章就介紹到這了,更多相關(guān)vue 分片上傳和斷點續(xù)傳內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！