利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件

最新推荐文章于 2025-06-03 10:30:08 发布

原创

最新推荐文章于 2025-06-03 10:30:08 发布 · 2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#关于图片裁剪、压缩、上传、预览等做的一个公共组件

利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件

<template>
  <div>
    <div class="upload-box">
      <div class="image-box"
           v-if="imageUrl"
           :style="{'background-image': 'url('+ imageUrl +')', 'height': imageHeight}"></div>
      <div class="upload">
        <h6 class="upload-des">支持 jpg、png 格式大小 5M 以内的图片</h6>
        <input type="file" @change="getFile" ref="file" id="file">
        <label for="file">点击上传</label>
      </div>
    </div>
    <!-- vueCropper 剪裁图片实现-->
    <div class="vue-cropper-box" v-if="isShowCropper">
      <div class="vue-cropper-content">
        <vueCropper ref="cropper"
                    :img="option.img"
                    :outputSize="option.outputSize"
                    :outputType="option.outputType"
                    :info="option.info"
                    :canScale="option.canScale"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber">
        </vueCropper>
      </div>
    </div>
    <el-button v-if="isShowCropper" type="danger" @click="onCubeImg">确定裁剪图片</el-button>
  </div>
</template&g