首先要先安裝oss插件
npm install ali-oss
然後倒入oss插件，可以全局也可局部，我用的是局部
import OSS from 'ali-oss'
在用oss直傳大文件的時候會出現瀏覽器崩潰的情況，針對這種情況，可使用分片上傳
分片上傳時，可能會出現以下情況
若出現上述情況，需要在oss中 要在跨域設置裏面的暴露 Headers增加一條ETag，然後就可以正常上傳了
uploadOssFile (data) {
var urlStr = this.upLoadAvatarOss(data)
console.log(this.ossData, urlStr)
},
async upLoadAvatarOss (e) {
const _this = this
_this.tableLoading = true
var file = e.file
var reader = new FileReader()
reader.readAsArrayBuffer(file)
return new Promise((resolve, reject) => {
reader.onload = function (event) {
const client = new OSS({
region: _this.ossData.region,
accessKeyId: _this.ossData.key,
accessKeySecret: _this.ossData.secret,
bucket: _this.ossData.bucket
})
let d = new Date()
let dArr = d.toLocaleDateString().split('/')
for (let index = 0; index < dArr.length; index++) {
if (index > 0 && dArr[index].length < 2) {
dArr[index] = '0' + dArr[index]
}
}
const obj = new Date().getTime() // 時間戳
const key = 'oss/' + 'project_' + _this.ossData.project_id + '/common/' + dArr.join('') + '/' + d.getTime() + '_' + file.name.split('.').join(obj + '.')
async function multipartUpload () {
_this.tableLoading = true
try {
let result = await client.multipartUpload(key, file, {
progress: function (percentage) {
console.log(percentage)
let fileloadingNum = Math.ceil(percentage * 100) + '%'
_this.tableText = '已上傳' + fileloadingNum
},
meta: {
year: 2019,
people: 'multipartUpload'
}
})
console.log(result)
let head = await client.head(key)
console.log(head)
let data = {}
data.uploadFile = '/' + result.name
data.fileSize = file.size
data.suffix = file.name.substr(file.name.lastIndexOf('.') + 1, file.name.length)
data.project_id = _this.ossData.project_id
data.id = _this.getCurrentId()
data.name = file.name
_this.addFileAjax(data)
if (result.res.statusCode === 200) {
e.onSuccess(result)
return result
} else {
e.onError('上傳失敗')
}
} catch (e) {
// 捕獲超時異常
if (e.code === 'ConnectionTimeoutError') {
console.log('Woops,超時啦!')
// do ConnectionTimeoutError operation
}
console.log(e)
}
}
return multipartUpload()
}
})
}