阿⾥云OSS前端直传⽂件⽅案注意点
最近项⽬⾥需要⼤量上传⽂件，考虑使⽤阿⾥云提供的对象存储，并采⽤前端直传⽅案。这⾥并不想介绍如何使⽤，想知道如何使⽤，可以直接参考官⽅⽂档，也没啥特多介绍的，所以这⾥主要是记录⼀下使⽤中的注意点。 阿⾥云上传⽂件官⽅⽂档：
1、使⽤oss对象
在代码中使⽤OSS对象：
<script type="text/javascript">
let client = new OSS({
电磁炉茶盘region: '<oss region>',
//云账号AccessKey有所有API访问权限，建议遵循阿⾥云安全最佳实践，创建并使⽤STS⽅式来进⾏API访问
accessKeyId: '<Your accessKeyId(STS)>',
accessKeySecret: '<Your accessKeySecret(STS)>',
stsToken: '<Your securityToken(STS)>',
bucket: '<Your bucket name>'
});
</script>
export async function initOss (isPublic) {
let _sts = await getStsToken()
let _bucket = getBucketName(isPublic)
let _ossClient = new OSS({
region: 'oss-cn-beijing',
bucket: _bucket,
accessKeyId: _sts.accessKeyId,
accessKeySecret: _sts.accessKeySecret,
stsToken: _sts.securityToken
}) return _ossClient }
通过 initOss 创建 OSS对象。这⾥有2个需要注意的点：
⼀个是什么情况使⽤什么桶（公开桶、私有桶），还涉及到根据不同环境取不同桶的问题。
第⼆个就是accessKeyId、accessKeySecret这种密钥类型的东西直接存储在前端是有安全问题的，建议是使⽤STS进⾏访问。
2、根据不同环境取不同桶
export function getBucketName (isPublic) {
let _mode = v.PATH_TYPE
let _bucket = ''
if (isPublic) {
_bucket = _mode === 'production' ? 'oss-***prod-public' : 'oss-***test-public'
} else {
_bucket = _mode === 'production' ? 'oss-***prod-private' : 'oss-***test-private'
}
return _bucket
}
其中 v.PATH_TYPE 就是通过 cross-env build不同字段打包设置的环境变量
注意：桶均要设置允许跨域才⾏。
3、ali-oss获取临时凭证
/
/ ali-oss获取临时凭证
export async function getStsToken () {
// 先从存储⾥获取
let _storageSts = Item('sts')
let _expiration = _storageSts && JSON.parse(_storageSts).expiration
if (_expiration && new Date().getTime() < new Date(_expiration).getTime()) {
return JSON.parse(_storageSts)
} else {
let { data } = await getOssSTSTokenApi()
let _sts = dentials
localStorage.setItem('sts', JSON.stringify(_sts))
return _sts
}
}
我们先从存储⾥取，然后判断是否过期，未过期就直接取；过期了就从后台调⽤获取，再存⼊localStorage⾥
流程主要根据⽂档来即可：，其中有各语⾔的SDK参考，可以直接选JAVA SDK参考即可
（1）先创建⼦账号，然后在添加权限页⾯，为已创建的⼦账号添加AliyunSTSAssumeRoleAccess权限
（2）创建权限策略。⾃⼰取名填写策略名称；配置模式选择可视化配置或脚本配置。以脚本配置为例，为ram-test添加ListObjects、PutObject、GetObject等权限，也可以选通配符 *，就是均允许 （3）创建⾓⾊并记录⾓⾊ARN。单击RAM⾓⾊管理，新建RAM⾓⾊，选择可信实体类型为阿⾥云账号，在新建RAM⾓⾊页⾯，填写RAM ⾓⾊名称和备注，本⽰例RAM⾓⾊名称为RamOssTest，选择云账号为当前云账号，单击完成，之后单击为⾓⾊授权。
在添加权限页⾯，选择⾃定义权限策略，添加步骤2中创建的权限策略。记录⾓⾊的ARN，即需要扮演⾓⾊的ID。
SDK⾥需要的 roleArn 和 roleSessionName，就是这个⾥⾯的 ARN 和名称，然后按各语⾔SDK写代码即可。⽐较简单。
4、分⽚上传与断点续传
有简单上传和分⽚上传，其实基本都会使⽤分⽚上传，代码也⽐较简单，下⾯是针对批量分⽚上传写的⼀个 mixin（针对编辑和新增是不同的交互逻辑，新增可以批量，编辑不能批量）
import { getKnowledgeListApi, saveContentApi, transformDocApi, transformVideoApi, getContentDetailApi } from'@/apis'
import { picklist, validator, initOss, needDocTrans, isVideoMode, guid, cbSuccess } from'@/utils'
import FileList from'./components/fileList'
export const uploadmixin = {
data () {
return {
perms: picklist.perms,
rules: validator,
resInfo: {
title: '',
brief: '',
permission: 'team',
knowledgeId: '',
teamId: '',
downloadable: true,
ext: '',
idx: ''
},
btnLoading: false,
knowledges: [],导电泡棉成型机
filesArray: [],
ossClient: null,
progress: {}, // 存储进度
}
},
components: {
FileList
},
methods: {
async getKnowledge () {
let { data } = await getKnowledgeListApi({ mold: 'resource', type: 'my', pageSize: 0 })
this.knowledges = data.list
let _id = this.$route.params.id
if (_id) this.fetchData(_id)
},
async fetchData (_id) { // 编辑获取内容详情
let { data } = await getContentDetailApi(_id)
this.knowledges.some((item, idx) => {
if (item.id === data.knowledgeId) {
data.idx = idx
return true
}
})
this.filesArray = [{
title: data.title,
storageSize: data.storageSize || 0
}]
},
selectKnowledge (idx) {
let _select = this.knowledges[idx]
},
saveCheckpoint (key, point) { // 保存上传断点
window.localStorage.setItem(key, JSON.stringify(point))
},
removeCheckpoint (key) { // 清除上传断点
veItem(key)
},
async initOss () {
this.ossClient = await initOss(false)
},
// 分⽚上传⽂件
async multipartUpload (item, idx, type) {
try {
let _this = this
let _tempCheckpoint = JSON.parse(Item('checkpoint' + item.file.lastModified)) || {} _tempCheckpoint.file = item.file
let _guid = guid() // 唯⼀id
let _pathname = 'resource'
if ( === 'mp4') _pathname = 'video/outputs'
else if ()) _pathname = 'video/inputs'
let _path = `${_pathname}/${amId}/${item.knowledgeId}/${_guid}.${}`
let result = await this.ossClient.multipartUpload(_path, item.file, {
progress: function (p, checkpoint) {
let _p = Math.floor(p * 100)
_this.$set(_this.progress, idx, _p)
if (_p < 100) _this.saveCheckpoint('checkpoint' + item.file.lastModified, checkpoint)
else _veCheckpoint('checkpoint' + item.file.lastModified)
},无压锅炉
checkpoint: _tempCheckpoint
}
)
let _url = questUrls[0]
item.url = _url.split('?')[0]
let { data } = await saveContentApi(item)
if ()) { // ⽂档需要转码
陶瓷接线柱transformDocApi({
baseId: data.operateCallBackObj,
url: item.url
})
} else if ()) { // 视频需要转码
transformVideoApi({
baseId: data.operateCallBackObj,
url: item.url
})
}
if (type === 'edit') { // 编辑的情况直接跳转，新建的情况等批量 Promise.all() 均请求完毕再跳转
cbSuccess(data, _ => {
this.$router.push(`/base/${item.id}`)
})
this.btnLoading = false淀粉酶抑制剂
}
} catch(e){
console.log(e)
}
},
// 视频和⽂档才可选下载
showDownload (ext) {
return needDocTrans(ext) || isVideoMode(ext)
}
},
mounted () {
this.initOss()
}
}
其中需要注意下这⾥的代码
let _tempCheckpoint = JSON.parse(Item('checkpoint' + item.file.lastModified)) || {}
_tempCheckpoint.file = item.file
因为⼀般⽂件不变的话，其lastModified就不会变，所以存在localStorage⾥的上传断点使⽤其lastModified⽐较好。
⽽且需要注意的是，存储在localStorage⾥⽂件肯定是存不了的，所以再上传⽂件就算有断点，也不会⽣效。
解决⽅案就是需重新赋值⼀下 file 即可，在代码⾥ _tempCheckpoint.file = item.file 重新赋值⼀下 file 即可。
复方川羚定喘胶囊
5、报错：You have no right to access this object because of bucket acl.
II）排查创建STS临时账户的⼦账户是否有授权AliyunSTSAssumeRoleAccess 权限或者扮演对应⾓⾊的权限，为⼦账户授权AliyunSTSAssumeRoleAccess 权限测试
III）排查创建STS临时账户的⾓⾊，是否有授权对应bucket对应接⼝的权限，为⾓⾊授权AliyunOSSFullAccess权限测试
IV 排查创建STS临时账户时传⼊的policy是否有对应bucket对应接⼝的权限，设置policy为OSSFULL权限看看是否正常；
{
"Statement": [
{
"Action": "oss:*",
"Effect": "Allow",
"Resource": "*"
}
],
"Version": "1"
}
我出现这个问题就是因为没为⾓⾊授权AliyunOSSFullAccess权限，给⾓⾊增加这个权限之后就可以了。
参考下⾯这些异常排查：
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议