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

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

直奔主题：

前端部分

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

3.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
  })
 }
 })
}

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

源码地址：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。