参考阿里云oss官方文档
1.准备工作
vue init webpack vue-oss-demo 初始化一个vue脚手架项目
登陆阿里云 配置相应的上传bucket 更改bucket读写权限为公共读
设置bucket跨域规则
bucket跨域规则
2.引入oss-sdk
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
3.配置oss参数
Vue.prototype.Oss= new OSS.Wrapper({
region: 'oss-cn-shanghai', //bucket 所在的区域, 默认 oss-cn-hangzhou
accessKeyId: '通过阿里云控制台创建的access key',
accessKeySecret: '通过阿里云控制台创建的access secret',
bucket: 'bucket名称'
});
4.普通上传
getFile(e) {
let file = e.target.files[0];
let pos = file.name.lastIndexOf(".");
//扩展名
let fileExten = file.name.substring(pos, file.name.length);
//文件名称 不含扩展名
let realFileName = file.name.substring(0, pos);
let timestamp = new Date().getTime();
realFileName += "_" + timestamp;
//文件存储路径 路径文件可自定义
let storeAs = "rty_test/" + realFileName + fileExten;
// console.log(storeAs)
this.Oss.multipartUpload(storeAs, file)
.then(res=>{
console.log(res)
}).catch(err=>console.log(err))
}
可能遇到的问题
ErrorCode: AccessDenied
ErrorMessage: You have no right to access this object because of bucket acl.
是因为子用户/临时用户没有访问Object的权限
需要对用户权限进行修改
如果用过是主账号的key则没有这个问题
success~
success
