下載OSS
npm install ali-oss或者<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>
引入（本人npm方式）
import OSS from 'ali-oss'
實例化
let ossConfig = { //配置項
region:that.region,
accessKeyId:that.accessKeyId, //前端直傳，沒有使用后端簽名（前端可以拿到OSS信息）
accessKeySecret:that.accessKeySecret,
bucket:that.bucket,
secure:true
}
let client = new OSS(ossConfig) //實例化OSS
let tempCheckpoint; //記錄斷點
that.isProgressVis = true //進度條
let progress
let index = e.file.name.lastIndexOf('.')
let suffix = e.file.name.substring(index)
let fileName = localStorage.getItem('platformCode')+new Date().getTime()+parseInt(Math.random()*1000)+suffix //文件名
// 定義上傳方法。
async function multipartUpload () {
try {
// object-key可以自定義為文件名（例如file.txt）或目錄（例如abc/test/file.txt）的形式，實現將文件上傳至當前Bucket或Bucket下的指定目錄。
let result = await client.multipartUpload(fileName, e.file, {
progress: function (p, checkpoint) {
// 斷點記錄點。瀏覽器重啟后無法直接繼續上傳，您需要手動觸發上傳操作。
tempCheckpoint = checkpoint
progress = p //進度條進度
that.percentage = parseInt(p*100)
},
meta: { year: 2020, people: 'test' },
mime: '.mp4',
})
let data = { //上傳返回的信息
url:result.res.requestUrls[0].split('?')[0],
p: progress
}
return Promise.resolve(data)
} catch(e){
return Promise.reject(e)
}
}
// 開始分片上傳
multipartUpload().then(res=>{
if(res.p!=1){
// this.isShowGo = true
// localStorage.setItem('name',fileName)
// localStorage.setItem('checkpoint',JSON.stringify(tempCheckpoint))
}else{
this.list.push({
sectionUrl:res.url
})
this.isProgressVis = false
this.$message.success('上傳成功')
this.isShows = true
this.showPercentage = false
}
}).catch(error=>{
this.isShowGo = true
localStorage.setItem('name',fileName)
localStorage.setItem('checkpoint',JSON.stringify(tempCheckpoint)) //必須location保存斷點位置
console.log(error)
this.$message.warning('上傳失敗')
})
//停止上傳，模擬外部因素造成的上傳中斷
// client.cancel()
},
//斷點續傳
goOn(){
let ossConfig = {
region:this.region,
accessKeyId:this.accessKeyId,
accessKeySecret:this.accessKeySecret,
bucket:this.bucket,
secure:true
}
let that = this
that.$message({
duration:5000,
type: 'info',
message:'上傳中，請耐心等待'
})
that.isProgressVis = true
let progress
let tempCheckpoint
// 恢復上傳。
let resumeclient = new OSS(ossConfig);
async function resumeUpload () {
try {
let result = await resumeclient.multipartUpload(localStorage.getItem('name'), that.files[0], {
progress: function (p, checkpoint) {
tempCheckpoint = checkpoint;
progress = p
},
checkpoint: localStorage.getItem('checkpoint'),
meta: { year: 2020, people: 'test' },
mime: '.mp4'
})
let data = {
url:result.res.requestUrls[0].split('?')[0],
p: progress
}
return Promise.resolve(data)
} catch (e) {
return Promise.reject(e)
}
}
resumeUpload().then(res=>{
if(res.p==1){
this.list.push({
sectionUrl:res.url
})
this.isProgressVis = false
this.isShowGo = false
this.$message.success('上傳成功')
this.isShows = true
}
}).catch(error=>{
console.log(error,'續傳的')
this.$message.warning('上傳失敗')
})
},