Vue-Cropper头像裁剪插件使用

为啥昵称重复呐

已于 2024-02-26 17:50:17 修改

阅读量1.5k

点赞数 23

于 2024-02-26 17:42:06 首次发布

本文链接：https://blog.csdn.net/m0_74021233/article/details/136305141

版权

本文介绍了如何在Vue项目中使用vue-cropper插件进行图片裁剪，包括下载安装、组件封装和注意事项，以及结合axios实现图片上传和实时预览功能。

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

1. 效果预览

在这里插入图片描述

2. 插件介绍

官网地址：[GitHub - xyxiao001/vue-cropper: A simple picture clipping plugin for vue](https://github.com/xyxiao001/vue-cropper?from=thosefree.com)

3 . 插件使用

下载插件

npm install vue-cropper@next

3 . 封装好的代码，拿来用即可

使用注意点

组件内引用-必须

 import 'vue-cropper/dist/index.css'
 import {
       VueCropper} from 'vue-cropper'
 import {
       getCurrentInstance, ref, reactive, watch} from 'vue'

如下片段可自行更改，

  const dp = defineProps({
        // 接收父组件参数
      realTime: "", // 实时时间
  })
  
  const de = defineEmits(["popUpClose"])
  
  const avatarUpload = () => {
        // 图片上传事件
      cropper.value.getCropBlob(data => {
       
          const formData = new FormData();
          formData.append("id", sessionStorage.getItem("userid"));
          formData.append('mf',data);  // file是你的文件对
          axios.post('/person/uploadAvatar', formData)
              .then(response => {
       	// 处理后台返回的结果
              if(response.code !== 200) return ElMessage.error(response.msg)
              ElMessage.success(response.msg)
              de("popUpClose", response.data)
          })
              .catch(error => {
        // 处理错误
              ElMessage.error(error.message)
              throw error
          });
      })
  }

封装组件代码：

<template>

<div class = "avatar-container" @click = "">

    <el-row>
        <el-col :span = "12" style = "width: 600px; height: 300px">
            <vue-cropper
                         ref = "cropper"
                         :img = "options.img"
                         :info = "true"
                         :autoCrop = "options.autoCrop"
                         :autoCropWidth = "options.autoCropWidth"
                         :autoCropHeight = "options.autoCropHeight"
                         :fixedBox = "options.fixedBox"
                         :outputType = "options.outputType"
                         @realTime = "realTime"
                         />
    </el-col>

        <!-- 实时预览部分 -->
        <el-col :span = "12" style = "height: 300px">
            <div class = "preview-box">
                <img v-if = "previews.url" :src