vue3图片头像裁剪上传

最新推荐文章于 2024-09-02 22:56:25 发布

月光下，遗忘黑暗

最新推荐文章于 2024-09-02 22:56:25 发布

阅读量1.1k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Godingchen/article/details/125723916

版权

本文介绍如何在Vue3项目中实现图片的裁剪和上传功能，通过使用vue-cropper组件，详细讲解了从安装到配置的全过程，包括组件引用、HTML结构、CSS样式以及JavaScript处理逻辑。

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

效果图

1.安装vue-cropper

pnpm add vue-cropper@next

2.组件内引用

import 'vue-cropper/dist/index.css'//引入圖片裁剪
import {
    VueCropper }  from "vue-cropper";

3.html部分

<van-popup v-model:show="showCropper" overlay-class="dialog" @click-overlay="delCropper">
    <div class="button-group">
      <van-button type="success" size="mini" @click="getCropBlob">Confirm</van-button>
      <van-button type="danger" size="mini" @click="delCropper">Cancel</van-button>
    </div>
      <VueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :full="option.full"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.