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


Posted in Javascript onAugust 09, 2017

本文介绍了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
  })
 }
 })
}

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
Javascript学习指南
Dec 01 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
vue 打包后的文件部署到express服务器上的方法
Aug 09 #Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 #Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 #Javascript
AngularJS ionic手势事件的使用总结
Aug 09 #Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 #Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 #Javascript
You might like
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jQuery事件用法详解
2016/10/06 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
Angular网络请求的封装方法
2018/05/22 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
axios封装与传参示例详解
2020/10/18 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
利用python进行文件操作
2020/12/04 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
shell变量的作用空间是什么
2013/08/17 面试题
承认错误的检讨书
2014/01/30 职场文书
给领导的检讨书
2014/02/16 职场文书
少年闰土教学反思
2014/02/22 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
服务器SVN搭建图文安装过程
2022/06/21 Servers