头像上传：可预览，缩放，裁剪

最新推荐文章于 2024-01-23 11:46:52 发布

sunshine-smile_lr

最新推荐文章于 2024-01-23 11:46:52 发布

阅读量543

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46034942/article/details/127672056

版权

这篇博客介绍了如何利用vue-cropper插件封装一个头像上传组件，包括从GitHub下载插件、引入到项目中及具体使用步骤。组件支持图片预览、缩放和裁剪功能，适用于前端开发。

摘要由CSDN通过智能技术生成

这里我封装的是组件，如有需要可以复制并引入即可。实现思路主要借助图片剪辑插件 ” vue-cropper “ 实现对上传图片的样式调整，使用步骤如下：

1.下载

npm i vue-cropper

github地址：https://github.com/xyxiao001/vue-cropper

2.引入

import { VueCropper } from "vue-cropper";

3.使用

components: { 
    VueCropper
}

大家可以根据自己的需求进行更该，大致思路注释有介绍

完整代码如下：

<template>
  <div>
    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
      <el-row>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <vue-cropper
            ref="cropper"