vue-cli-web直传oss实践

参考阿里云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