vue框架-前端oss直传

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

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

2.引入SDK-js

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

3.1 如何上传

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

client.multipartUpload('重命名后的名字','文件内容',{上传进度回调}）

3.2 如何浏览 （这里有个私有文件和公有文件的区别）

文档地址：https://help.aliyun.com/document_detail/64054.html?spm=a2c4g.11186623.6.771.HNKycx

私有图片拼接规则：

 var client = new OSS({ //这里是设置图片预览地址
                region: _this.region,
                accessKeyId: '',
                accessKeySecret: '',
                bucket: _this.bucket
              });
              var signUrl = client.signatureUrl(random_name, {expires: 6000, 'process' : 'image/resize,w_300'});

需要先去去获取权限（证明你有权限访问这张图片）

公有图片地址拼接规则：http://bucket./object?x-oss-process=image/action,parame_value