vue页面使用阿里oss上传功能(一)

源码

直奔主题:


注意:这里的前端代码是基于vue 1.0 的上传代码,如果您的项目使用的是vue2.0,那么请点击这里

前端部分

1.前端页面中需要引入oss-sdk:
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
2.自己封装的upload组件:

<template>
    <div>
        <div class="oss_file">
            <input type="file" :id="id" :multiple="multiple" @change="doUpload"/>
        </div>
    </div>
</div>
</template>
<script>
    export default{
        props:{
            multiple:{
                type: Boolean,
                twoWay:false
            },
            id:{
                type: String,
                twoWay:false
            },
            url:{
                type: Array,
                twoWay:true
            }
        },
        data(){
            return{
                region:'Your oss Region',
                bucket:'Bucket Name',
            };
        },
        methods:{
            doUpload(){
                const _this = this;
                Vue.http.get('/alioss/getOssToken').then((result) => {
                    const client = new OSS.Wrapper({
                        region:_this.region,
                        accessKeyId: result.data.token.AccessKeyId,
                        accessKeySecret: result.data.token.AccessKeySecret,
                        stsToken: result.data.token.SecurityToken,
                        bucket:_this.bucket
                    })
                    const files = document.getElementById(_this.id);
                    if(files.files){
                        const fileLen = document.getElementById(_this.id).files
                        const resultUpload = [];        
                        for (let i = 0; i < fileLen.length; i++) {
                            const file = fileLen[i];
                            const storeAs = file.name;
                            client.multipartUpload(storeAs, file, {

                            }).then((results) => {
                                if(results.url){
                                    resultUpload.push(results.url);
                                }
                            }).catch((err) => {
                                console.log(err);
                            });
                        }
                        _this.url = resultUpload;
                    }   
                });
            }
        }
    };
</script>
<style type="text/css">
    .oss_file {
        height: 100px;
        width: 100%;

    }
    .oss_file  input {
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

</style>

3.使用组件:

<template>
    <div>
        <div>
            <ali-upload :url.sync="uploadUrl" :multiple="true" :id="uploadId" :code.sync="uploadCode"></ali-upload>
        </div>
        <div v-for="url in uploadUrl">
            ![](url)
        </div>
    </div>
</div>
</template>
<script>
    import aliUpload from './../components/aliossupload.vue';
    export default{
        components:{
            aliUpload
        },
        data(){
            return{
                uploadUrl:[],
                uploadId:'file',
                uploadCode:0
            };
        },
        watch:{
            uploadCode(val){
                console.info(val)
            }
        }
    };
</script>

后端部分

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()

2.controller文件

'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
      })
    }
  })
}

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

有时简书不能及时回复,请加我微信或者QQ:2433169657

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,906评论 1 305
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,698评论 1 257
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,242评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,257评论 0 182
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 49,076评论 1 260
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,912评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,509评论 2 274
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,255评论 0 168
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,145评论 6 235
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,613评论 0 214
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,376评论 2 216
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,733评论 1 231
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,287评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,196评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,644评论 3 211
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,651评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,059评论 0 169
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,644评论 2 233
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,789评论 2 237

推荐阅读更多精彩内容

  • 我太明显了,简直太明显了。 要偷偷看的人, 我明显地站在人家跟前; 要偷偷想的人, 我明显地对人家表白; 要偷偷爱...
    不得了3阅读 248评论 0 1
  • 优养美丽说阅读 172评论 0 0
  • 山顶祥云气连天 山腰松柏傲冬寒 泉水含羞低声语 山中有我才有仙
    石竹阅读 301评论 17 10
  • 在小学阶段,五年级已经属于高年级。所以我就理所当然的以为五年级的学生已经比较成熟。直到这次见习,才发现自己原来的想...
    偏執l阅读 1,603评论 0 1