Vue使用vue-image-crop-upload实现网页中上传图片之前先剪裁的功能

最新推荐文章于 2024-03-27 15:33:41 发布

对啊我是太阳啊

最新推荐文章于 2024-03-27 15:33:41 发布

阅读量3.7k

点赞数 1

分类专栏： Vue憨批笔记文章标签： Vue 插件前端图片剪裁

本文链接：https://blog.csdn.net/qq_42034123/article/details/102784862

版权

本文介绍了如何使用 Vue 结合 vue-image-crop-upload 插件，在前端实现图片上传前的剪裁功能。通过封装组件和安装相关依赖，可以轻松实现选择图片、预览及保存剪裁后的图片效果。

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

                    
                        
                    
                    先上vue-image-crop-upload的github地址【含中文文档】
建议将这个功能封装成单独的组件
使用之前需要安装两个插件：
 npm i babel-polyfill -S
 npm i vue-image-crop-upload -S
代码：<!--HTML部分-->
<div id="image">
    <!--上传图片的按钮-->
    <a class="btn" @click="toggleShow">设置头像</a>
    <!--组件主体-->
    <my-upload 

                