本文介绍了vue页面使用阿里oss上传功能的实例(一),分享给大家,也给自己留个笔记
直奔主题:
前端部分
1.前端页面中需要引入oss-sdk:
<script src="/UploadFiles/2021-04-02/aliyun-oss-sdk-4.4.4.min.js">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 co2.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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 群星《十二女声Ⅲ》[WAV/CUE/分轨][626.4MB]
- 陈百强.1993-离不开...纪念歌集2CD【华纳】【WAV+CUE】
- 于台烟.2003-爱自己【乾坤唱片】【WAV+CUE】
- 群星.2024-我们永远是我们电影原声带【乐禾发文化】【FLAC分轨】
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[DSF]
- 明达年度发烧碟MasterSuperiorAudiophile2017[DSF]
- 翁立友.2008-恨孤单【大旗】【WAV+CUE】
- 群星.2009-Magic.Cover日粤精华3CD【环球】【WAV+CUE】
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]