vue-前端oss直传

在vue框架中使用oss直传，前端直接调oss接口，服务端直接将所有文件存在同一个目录下（提高效率），之所以网页上看到有文件夹的区分，是因为根据前端命名方式（一般是自定义文件夹名字加文件名字加时间搓）来制造有文件夹区分的效果，这个命名可以理解成是这个文件的唯一标识。传给后端的时候直接把这个命名传入即可。

1.在阿里云新建配置跨域规则（header嫌麻烦配置成*即可，如不配置会产生跨域问题）

2.引入SDK-js

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

3.新建组件（我是基于vue-element组件）

3.1 如何上传

 

 const client = new OSS.Wrapper({
          region: _this.region,
          accessKeyId: '',//填入自己的id
          accessKeySecret: '',//填入自己的id
          bucket: _this.bucket
        })

 

client.multipartUpload('重命名后的名字','文件内容