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 相关文章推荐
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
详细分析单线程JS执行问题
Nov 22 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
快速掌握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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
php简单实现快速排序的方法
2015/04/04 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
python+mongodb数据抓取详细介绍
2017/10/25 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python基础知识点 初识Python.md
2019/05/14 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
python中pyqtgraph知识点总结
2021/01/26 Python
试述DBMS的主要功能
2016/11/13 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript