一个支持图片上传前预览，裁剪的vue组件

最新推荐文章于 2023-10-03 15:40:59 发布

chuifan5022

最新推荐文章于 2023-10-03 15:40:59 发布

阅读量303

点赞数

文章标签： javascript git ViewUI

原文链接：https://my.oschina.net/u/3185514/blog/840228

版权

前端在上传图片之前可以设置图片的宽高比进行预览和裁剪

可以在其父组件通过props传值进行个性化参数设置

<template>
  <div id="box">
    <vue-core-image-upload
      :class="['pure-button','pure-button-primary','js-btn-crop']"
      :crop="true" :url="url" :extensions="extensions" :text="text"  :input-of-file="inputOfFile" :up-img-src="upImgSrc"
      :crop-ratio="cropRatio"
    >
    </vue-core-image-upload>
  </div>
</template>
<script>
  import vueCoreImageUpload from './vue.core.image.upload.vue'
  export default {
    data(){
      return{
        upImgSrc:'',//上传图片后返回的图片地址
        url : '/dataup', //上传图片的接口地址
        text : '上传图片',//按钮文本
        inputOfFile : 'pic',//上传文件的文件名
        cropRatio : '1:1',  //剪切框的宽高比
        extensions  : 'png,gif,jpeg,jpg' //上传图片类型
      }
    },
    components: {
     vueCoreImageUpload,
    },
    created(){
      this.imgSrc();
    },
    methods:{
      imgSrc(){
        console.log(this.upImgSrc)
      }
    }
  }
</script>
<style scoped>
#box{
  width: 200px;
  height: 100px;
  margin: 100px auto 0;
  text-align: center;
  background: #fff;
}

</style>

整体效果如下：