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{								 
 1/2    1 2 下一页 尾页