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;
}
});