vue-alioss-component encapsulation

<template>
  <div class="vui_alioss_upload">
    <div @click="uloadImg()"><slot></slot></div>
    <div class="vui_alioss_file">
      <input ref="vui_alioss_file" type="file" :id="id" @change="doUpload()"/>
      <img :src="url" alt="">
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'upload',
    props:['url'],
    data() {
      return {}
    },
    methods: {
      uloadImg () {
        this.$refs['vui_alioss_file'].click()
      },
      doUpload(e){
        let _this = this,file = this.$refs['vui_alioss_file'].files[0]
        if(!file || file.length<1) return
        axios({
          method: 'get',
          url:_this.url,
          withCredentials:true
        }).then(res=> {return res.data}).then(data=>{
          _this.upLoadOss(Object.assign({},data.data,{file:file}))
        })
      },
      upLoadOss(data){
        var request = new FormData(),_this= this;
        request.append("OSSAccessKeyId",data.accessid);//Bucket 拥有者的Access Key Id。
        request.append("policy",data.policy);//policy specifies the validity of the requested form field
        request.append("Signature",data.signature);//According to the signature information calculated by Access Key Secret and policy, OSS verifies the signature information to verify the legitimacy of the Post request
        request.append("key",data.dir+data.file.name);//File name, path can be set
        request.append("success_action_status",'200');// Let the server return 200, otherwise, it will return 204 by default
        request.append('file', data.file);//The file file that needs to be uploaded
        axios({
          method: 'post',
          url:data.host,
          data: request,
        }).then(res=> {return res.data}).then(rst=>{
          _this.$emit('upLoadImgEnd',data.host+'/'+data.dir+data.file.name)
        })
      }
    }
  }

</script>

<style  scoped>
  .vui_alioss_upload{display: inline-block;}
  .vui_alioss_upload >div{display: inline-block;}
  .vui_alioss_upload .vui_alioss_file{height: 0;overflow: hidden}
</style>

　　

  <FileUpload :url="getassessurl" v-on:upLoadImgEnd="upLoadImgEnd">
      <img v-if="imgUrl" :src="imgUrl" alt="">
     <p v-if="!imgUrl">Click to upload image</p>
    </FileUpload>

　　

github:   https://github.com/longfei59418888/vui    (remember to give a start, we will discuss together later, various good components)