下载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('上传失败')
})
},