Vue2.0实现可裁剪图片使用vue-image-crop-upload插件上传失败

最新推荐文章于 2023-06-14 16:18:11 发布
最新推荐文章于 2023-06-14 16:18:11 发布
阅读量265 收藏 1
点赞数
分类专栏： 异常捕获 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43716338/article/details/125085521
版权

看图说话
在这里插入图片描述
异常处理打印输出这样一个异常信息：
在这里插入图片描述

凌晨一点还在修这个bug…
不绕圈了，我摊牌了：在我这，我前端用了Mock，发生冲突了，大概是Mock的xhr.addEventListener和插件里面封装的xhr.upload.addEventLister冲突了，所以就出现这个异常，也上传失败了，我停用了mock就可以上传成功了。我看到GitHub大佬说改mock里面的源码可以修改冲突，我试了下，可能是mock版本问题，修改无效。

地址在这，有兴趣可以看看。

柘月十七
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vueimagecropupload一个漂亮的vue图片剪裁上传组件
08-09
vue-image-crop-upload一个漂亮的vue图片剪裁上传组件
vue-core-image-upload：用于裁剪和上传图像的vue插件
02-06
用于图像上传和裁剪的vue插件（支持 :mobile_phone: IE10 +） 如果使用vue.js（<= 2.0），则应转到。或选择1.xx版本。 安装 npm i vue-core-image-upload --save 代码示例（ES6） < vue-core-image-upload ...
vue-image-crop-upload头像上传
08-22 365
npm install vue-image-crop-upload npm install –save-dev babel-polyfill <template> <div id="app"> <button class="btn" @click="toggleShow">设置头像</button> <my-upload @crop-success="cropSuccess" @crop-upload-success
使用vue-image-crop-upload上传图片
成在坚持，贵在坚持
06-22 766
安装 npm install vue-image-crop-upload 使用 // html <myUpload v-model="show" @crop-success="cropSuccess" :width="imgLength" :height="imgLength" /> // script // data // 宽，高 imgLength: 120, show: false // method cropSuccess(imgDataUrl, field) { //
vue-image-crop-upload 头像/图片上传组件
qq_43059898的博客
08-04 1486
安装 npm install vue-image-crop-upload npm install –save-dev babel-polyfill 示列 1 2 3 <button class=“btn” @click=“toggleShow”>设置头像 4 <my-upload 5 @crop-success=“cropSuccess” 6 @crop-upload-success=“cropUploadSuccess” 7 @crop-u
vue-image-crop-upload 头像或图片上传组件
03-10 457
https://www.cnblogs.com/tangwei89/p/11653599.html
vue-image-crop基于Vue的移动端图片裁剪组件示例
10-18
Vue.js 是一款流行的前端框架，用于...总之，`vue-image-crop` 提供了一种便捷的方式来在 Vue.js 应用中实现移动端图片裁剪功能，通过其丰富的属性和事件系统，可以轻松地集成到各种项目中，满足用户对图片编辑的需求。
antd-img-crop:Ant用于Ant Design上传的图像裁剪器
04-28
antd-img-crop 用于Ant设计的图像裁剪器。 English |演示版安装yarn add antd-img-crop用法import ImgCrop from 'antd-img-crop' ;import { Upload } from 'antd' ;const Demo = ( ) => ( < ImgCrop> < Upload> + ...
Upload-image-crop-resize-PHP:使用Cropper JS上载时PHP裁剪图像
04-13
- 根据前端发送的裁剪参数，计算出裁剪区域并调用相应的裁剪函数（如`imagecrop()`或`Imagick::cropImage()`）。 - 可能需要调整图片大小，使用`imagescale()`或`Imagick::thumbnailImage()`。 - 保存裁剪并调整...
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
11-26
在前端开发中，图片裁剪功能常常被用于各种应用场景，如用户头像上传、产品图片编辑等。Vue.js 结合 Element-UI 和 cropper.js 可以方便地封装出一个强大的图片裁剪组件。以下将详细讲解如何在 Vue-cli 环境下实现这...
Vue图片上传剪裁组件 AppCropper.zip
04-25
基于vue封装的Cropper图片剪裁组件，cropperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括IE9以上的现代浏览器。（关键是使用方法简单，几行代码就可以搞定） 实践效果图 　　如图，可以对指定的图片进行裁剪，可以自己选择裁剪的交互方式，如大小、纵横比等 还可以预览裁剪区域，确认裁剪后可以生成一个包含裁剪图的canvas对象，借助canvas的toDataURL方法可以生成一张Base64格式的图片。还有另外一种不使用canvas的方式，利用该工具丰富的api可以拿到裁剪区域相对于原图的各项数据，使用这些数据进行css绝对定位即可展示裁剪后的图，该方式可以保证图片不失真和完整。
vue-image-crop-upload 一个强大的图片剪切组件
cominglately的博客
08-05 3334
场景 分析 组件地址 安装 用法 场景 对一个站点来说处理用户头像的功能是必不可少的， 分析 哈 ，功能先看有没有组件用一下 组件地址 组件dai-siki/vue-image-crop-upload 安装 npm install –save-dev babel-polyfill (安装依赖) npm install –save-d...
Vue使用vue-image-crop-upload实现图片的上传与显示
bu_xiang_tutou的博客
11-17 4062
vue-image-crop-upload实现图片的上传与显示
vue-image-crop-upload的使用
最新发布
weixin_42203451的博客
06-14 607
开关是v-model="imagecropperShow"6.中文文档--官方ReadMe。5.上传文件到OSS。
vue-image-crop-upload图片上传裁剪功能
Dreamer_xr的博客
10-19 4586
安装 npm install vue-image-crop-upload 组件代码： &lt;template&gt; &lt;div id="app"&gt; &lt;a class="btn" @click="toggleShow"&gt;设置头像&lt;/a&gt; &lt;my-upload field="img" @c
使用vue-image-crop-upload剪裁图片通过thinkphp5上传到七牛云
奔跑的IT小白的博客
12-18 1195
在此工作之前必须有七牛云账号和七牛云已经创建好的空间，在账号中可以获取到 ACCESSKEY 和 SECRETKEY。 vue-image-crop-upload的使用方法可以参考官方的用法，如何需要满足自己的需求，可进行一定的修改再封装成自己的组件进行使用。 vue-image-crop-upload前端代码： &lt;a class="btn" @click="toggleShow"&...
vue图片剪裁上传插件——vue-image-crop-upload示例
weixin_44867717的博客
12-06 621
图片
vue-image-corp-upload插件保存裁剪图片和取消图片像素验证。
小jinx的博客
04-19 1220
简介 vue-image-corp-upload适用于pc端用于头像，图标的正方形裁剪（也可以用于圆形显示），使用简单。插件效果如图。 一.取消默认上传 主要参考blog地址 ： https://blog.csdn.net/xr510002594/article/details/83184492 vue-image-corp-upload官方文档：https://www.npmjs.com/pa...
【Vue3】完善vue-image-crop-upload的使用（修改源码）
woodwhale的博客
04-12 2197
【Vue3】完善vue-image-crop-upload的使用 前言 在GitHub上找适配vue3的图片裁剪，看到了vue-image-crop-upload这个项目，就直接拿来用了。 问题1：文件名不可自定义 用了一晚上，发现有个非常难受的点——图片上传的文件名不可以自定义，默认使用field字段，但是我用springboot写的后端的注解是@RequestPart("file")，这就导致了field必须得为file字符串才可以上传成功… 第二天起来开始改源码，成功解决就分享一下！ 1、找到文件 首
vue-image-crop-upload使用
03-08
vue-image-crop-upload 是一个基于 Vue.js 的图片裁剪上传组件，可以方便地实现图片裁剪和上传功能。它支持多种图片格式，包括 jpg、png、gif 等，并且可以自定义裁剪框的大小和比例。如果您需要使用图片裁剪上传...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值