vue页面使用阿里云oss

web上传文件到阿里云oss

基于vue2.0的上传页面，采用分片上传

源码

Install

  • 1.git clone
git clone https://github.com/taosin/alioss-js-upload.git
  • 2.npm install
cd alioss-js-upload
  • 3.node index.js
node index.js
  • 4.npm install
cd public
    1. npm run dev
npm run dev

注： 具体配置方法可参照 vue页面使用阿里oss上传功能（一） 和 vue页面使用阿里oss上传图片功能(二)

  • 1.前端页面中引入oss-sdk
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
    1. 前端上传组件代码在 public/src/components/upload.vue中，主要如下：
export default {
    name: 'upload',
    data () {
      return {
        region: '你的ossRegion',
        bucket: '你的ossBucket',
        id: 'id',
        percentage: 0   // 上传进度
      }
    }
}
  • 3.server端（service.js）需要修改的代码如下：
var sts = new STS({
    accessKeyId: '你的accessKeyId',
    accessKeySecret: '你的accessKeySecret',
});
var rolearn = '你的rolearn';

var policy = {
    "Version": "1",
    "Statement": [
    {
        "Effect": "Allow",
        "Action": [
        "oss:GetObject",
        "oss:PutObject"
        ],
        "Resource": [
        "acs:oss:*:*:oss-upload",
        "acs:oss:*:*:oss-upload/*"
        ]
    }
    ]
};

End

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容