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

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

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

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

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

vue 阿里oss上传 vue 阿里云oss vue 上传图片到阿里云