Vue 上传图片前 裁剪图片

一. 使用的技术

vue-cropper

文档:vue-cropper | A simple picture clipping plugin for vue

二. 安装

html 复制代码
npm install vue-cropper  或  yarn add vue-cropper

三. 引入

在使用页面中引用

html 复制代码
import { VueCropper } from 'vue-cropper';

四. 使用

配置项:

五. 小结

这个可以结合element 上传组件使用 在上传图片选择之后 拿到文件的url地址, base64, blob 赋值给vue-cropper. 弹出截图组件,截取完之后可以拿到图片的数据。然后在赋值给上传组件。

相关推荐
代码小学僧几秒前
Cursor 的系统级提示词被大佬逆向出来了!一起来看看优秀 prompt是怎么写的
前端·ai编程·cursor
MrsBaek4 分钟前
前端笔记-Axios
前端·笔记
洋流7 分钟前
什么?还没弄懂关键字this?一篇文章带你速通
前端·javascript
晴殇i8 分钟前
for...in 循环的坑,别再用它遍历 JavaScript 数组了!
前端·javascript
海底火旺8 分钟前
寻找缺失的最小正整数:从暴力到最优的算法演进
javascript·算法·面试
littleplayer10 分钟前
iOS 单元测试详细讲解-DeepSeek
前端
littleplayer11 分钟前
iOS 单元测试与 UI 测试详解-DeepSeek
前端·单元测试·测试
夜熵14 分钟前
Vue中nextTick()用法
前端·面试
小桥风满袖14 分钟前
Three.js-硬要自学系列15 (圆弧顶点、几何体方法、曲线简介、圆、椭圆、样条曲线、贝塞尔曲线)
前端·css·three.js
洋流15 分钟前
JavaScript事件流机制详解:捕获、冒泡与阻止传播
前端·javascript