Vue-cropper 实现图片头像上传裁剪（组件封装）

小溪小西

已于 2024-08-08 16:02:37 修改

阅读量993

点赞数 9

文章标签： vue.js 前端

于 2024-01-23 11:46:52 首次发布

本文链接：https://blog.csdn.net/Yusian_/article/details/135766950

版权

本文介绍了如何在Vue3项目中通过npm安装并导入vue-cropper库，展示了组件的封装和使用方法，包括文件上传、裁剪功能、预览以及数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网：https://github.com/xyxiao001/vue-cropper

Npm安装及导入
主要代码
- 组件封装
- 组件使用
实现效果

一、Npm安装及导入

npm install vue-cropper@next

Vue3 组件内引入

import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";

Vue3 全局引入

import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'

const app = createApp(App)
app.use(VueCropper)
app.mount('#app')

二、主要代码

组件封装

<template>
  <el-row>
    <!-- 上传文件 -->
    <el-col :span="20">
      <input 
      style="display: none;"
      type="file"
      ref="uploadRef" 
      accept="image/"
      @change="uploadImg($event,1)"
    >
    <!-- 上传修改样式 -->
    <div class="cursor-pointer mb-5" @click="uploadRef.click()">
      <el-input v-model="imgName" :placeholder="请选择图片" readonly>
        <template #prepend><el-icon><Picture /></el-icon></template>
      </el-input>
    </div>
    </el-col>
  </el-row>
  <el-row>