vue页面使用阿里oss上传功能的实例（一）

vue页面使用阿里oss上传功能的实例（一）

本文介绍了vue页面使用阿里oss上传功能的实例（一），分享给大家，也给自己留个笔记

直奔主题：

前端部分

1.前端页面中需要引入oss-sdk:

2.自己封装的upload组件：

3.使用组件：


后端部分

1.首先安装依赖

npm install ali-oss

npm install co

2.service文件

'use strict'

var OSS = require('ali-oss');

var STS = OSS.STS;

var co = require('co');

var sts = new STS({

accessKeyId: 'accessKeyId',

accessKeySecret: 'accessKeySecret',

});

var rolearn = 'acs:ram::ID:role/ram';

var policy = {

"Version": "1",

"Statement": [

{

"Effect": "Allow",

"Action": [

"oss:GetObject",

"oss:PutObject"

],

"Resource": [

"acs:oss:*:*:Bucket",

"acs:oss:*:*:BucketName/*"

]

}

]

};

class OssUploadService {

getOssToken(req, res){

var result = co(function* () {

var token = yield sts.assumeRole(rolearn, policy, 15 * 60, 'ossupload');

res.json({

token:token.credentials

})

}).catch(function (err) {

});

}

}

module.exports = new OssUploadService()

3.controhttp://ller文件

'use strict'

var ossUploadService = require('../service/ossUploadService')

module.exports = function(app) {

app.get('/alioss/getOssToken', function(req, res) {

const result = ossUploadService.getOssToken(req, res)

if (result) {

res.json({

code: 100,

data: result

})

}

})

}

到这里就大功告成了吗？错！这只是完成了最基本的部分，接下来我们要在阿里云控制台中设置权限、角色、策略等。

源码地址：https://github.com/taosin/alioss-js-upload

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。