vue-alioss-组件封装-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

vue-alioss-组件封装

简介: import axios from 'axios' export default { name: 'upload', props:['url'], data() { retur...
<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,以后有一起讨论,各种好组件)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章