vue-alioss-組件封裝

<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規定了請求的表單域的合法性
        request.append("Signature",data.signature);//根據Access Key Secret和policy計算的簽名信息，OSS驗證該簽名信息從而驗證該Post請求的合法性
        request.append("key",data.dir+data.file.name);//文件名字，可設置路徑
        request.append("success_action_status",'200');// 讓服務端返回200,否則，默認會返回204
        request.append('file', data.file);//須要上傳的文件 file
        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">點擊上傳圖片</p>
    </FileUpload>

　　

我的博客 ：不少好用的 npm 包 ， 能夠看看  https://gilea.cn/

github:  https://github.com/longfei59418888/vui   （記得給一個 start,之後有一塊兒討論，各類好組件）