vue页面使用阿里oss上传功能的实例（一）
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
本篇文章主要介绍了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">
</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
})
}
})
}
到这里就大功告成了吗？错！这只是完成了最基本的部分，接下来我们要在阿里云控制台中设置权限、角色、策略等。
源码地址：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。