vue-image-crop-upload图片格式验证BUG问题

最新推荐文章于 2024-08-18 15:15:05 发布
最新推荐文章于 2024-08-18 15:15:05 发布
阅读量133 收藏
点赞数
分类专栏： vue 文章标签： vue.js bug 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lidaima/article/details/128465953
版权

vue-image-crop-upload图片格式错误验证BUG

该插件是一款GitHub上的 裁剪组件支持vue1x vue2x vue3x

在这里插入图片描述
在GitHub搜索栏直接搜到，目前已经有2k星星了

在使用中发现一个bug

在这里插入图片描述

当上传了一张格式错误的图片比如 200*200以下的图片时会出现错误验证提示

然后点击取消按钮

在这里插入图片描述

再打开

在这里插入图片描述

再上传一张同样的200*200以下的图片 该格式验证就会全部失效

在这里插入图片描述

通过打开node_modules下面找到vue-image-crop-upload打开upload-3.vue文件

在这里插入图片描述

把v-show=“modelValue” 改为 v-if=“modelValue” 就解决了

目前再官方实例中也存在该BUG，还未修复

july__1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-image-crop基于Vue的移动端图片裁剪组件示例
10-18
在这个场景中，我们讨论的是一个名为 `vue-image-crop` 的组件，它是一个专为移动端设计的图片裁剪工具，旨在简化在 Vue 应用中处理图片裁剪的需求。这个组件利用了现代浏览器的一些特性，如 `URL.createObjectURL()...
vue-core-image-upload：用于裁剪和上传图像的vue插件
02-06
npm i vue-core-image-upload --save 代码示例（ES6） < vue-core-image-upload :class =" ['btn', 'btn-primary'] " :crop =" false " @imageuploaded =" imageuploaded " :data =" data " :max-file-...
vue-image-crop-upload 头像/图片上传组件
qq_43059898的博客
08-04 1498
安装 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
渗透测试的介绍和防范
qq_57558631的博客
05-27 1337
跨站脚本攻击 跨站脚本攻击是指攻击者将具有恶意目的的数据潜入到远程用户信任的WEB页面的HTML 代码中，当该页面被浏览器下载运行时嵌入的脚本将被执行，用户页面被跳转到攻击者精心编织的其他页面，用户毫无顾及的填写各种敏感信息，殊不知已被攻击者盗取或被站点挂马控制。 XSS攻击是什么 XSS是跨站脚本攻击的缩写，是一种网站应用程序的安全漏洞攻击，是代码注入的一种。 通常是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。 这些恶意网页程..
vue用upload标签上传图片限制图片属性
qq_44078850的博客
06-06 1044
限制上传图片类型和大小属性
vue-crop-image-mobile：为移动端剪切图片
02-04
在vue-crop-image-mobile 中，可能会有测试脚本和配置文件，用于验证组件功能的正确性。 综上所述，vue-crop-image-mobile 是一个专为移动端设计的Vue组件，提供了图片裁剪功能，具备良好的兼容性和用户体验。通过...
基于vue-upload-component封装一个图片上传组件的示例
10-17
【基于vue-upload-component封装图片上传组件的步骤与技术解析】 在Web开发中，图片上传功能是常见的需求之一。本文将详细介绍如何基于`vue-upload-component`库封装一个自定义的图片上传组件，以满足多图上传、...
解决vue-photo-preview 异步图片放大失效的问题
10-15
在Vue.js开发过程中，我们经常需要使用图片预览功能，而`vue-photo-preview`是一个常用的图片预览插件。然而，当处理异步加载的图片时，可能会遇到图片放大失效的问题。本文将详细探讨这个问题，并提供解决方案。 ...
vue选中下拉框数据，但是值没有填充到框内
m0_68154641的博客
08-14 219
element-ui选中下拉框数据，但是值没有填充到框内
实现父组件调用子组件方法时报错：[Vue warn]: Invalid vnode type when creating vnode: null.
08-14 316
[Vue warn]: Invalid vnode type when creating vnode: null.
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 400
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 337
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Vue 3的Computed属性
计算机图形学
08-15 416
Vue 3的组合式API为Computed属性的使用带来了新的变化和可能性。通过computed函数，开发者可以轻松地创建只读或可写的Computed属性，并在组件中高效地处理响应式数据。合理使用Computed属性，可以使代码更加简洁、清晰和高效。
Vue 3 watchEffect教程
weixin_42545951的博客
08-17 446
Vue 3 引入了 Composition API，其中是一个非常强大的工具，用于响应式地追踪依赖项的变化。本文将详细介绍的使用方法和相关概念。是 Vue 3 的 Composition API 中的一个函数，用于自动追踪其回调函数中使用的响应式状态，并在状态变化时重新执行回调函数。通过本文的介绍，你应该对 Vue 3 中的有了基本的了解。是 Vue 3 响应式系统的核心功能之一，能够极大地简化副作用的处理逻辑，提高代码的可读性和可维护性。在实际开发中，合理使用将使你的 Vue 应用更加强大和灵活。
使用el-menu跳转时偶尔会出现路由已经变了，但是页面却显示空白的情况
qq_49080239的博客
08-15 295
我改的期间发现，是上一个跳转的组件如果出现template里包了多个标签，那么下一个组件就会变成空白。所以当你发现有一个页面跳转出错，但是怎么也找不到错误时，那你就去看看它的上一个跳转的页面是不是存在错误。刚开始我以为是我数据加载的问题，后来又看有人说是template里不能包多个div，但我去看我出错的组件，并没有出现两个div。后来我就把每个都给改了，即使是elemen-ui的标签也全部改在一个div里，就发现没问题了。
vue3中子向父传数据
m0_61265297的博客
08-15 144
父组件首先，我们创建一个父组件，名为代码解释1，在 <template> 部分，我们展示父组件的数据 receivedData，并通过自定义事件 sendData 来接收子组件传递的数据。2，在 <script setup> 部分，我们引入了Vue3的 ref 来创建响应式变量 receivedData。3，updateData 方法用于更新接收到的数据。4，我们通过引入并使用子组件 ChildComponent，同时监听其 sendData 事件并调用 updateData 方法。
88.SAPUI5 Model Binding的问题-在view更改数据，model却不变
智盟科技智能制造团队的博客
08-15 359
在做一个UI5项目，后台读取sap.ui.model.Model后，把数据绑定到view的table里，在table更改数据，后台取sap.ui.model.Model后，数据没有改变，仍然保持当初从后台读取过来的值。后台同事问了一句，是不是和绑定模式有关。进而调查到model的最初绑定的代码段，果然发现绑定的是OneWay模式，更改后TwoWay后，问题得到解决。BindingMode双向意味着从模型到视图，反之亦然。BindingMode单向表示从模型到视图。我们研究了好长时间，没找到症结。
花裤衩 vue 前后端登录
最新发布
c8899y的博客
08-18 326
可粘贴:proxy: {processenv]: {targettrue: {'^'processenv]:''}, 下面是添加发送验证码的操作:添加方法修改路径模块: 打开api的user.js 添加:快捷:修改:登录后台 远程调用。
vue-image-crop-upload
03-16
vue-image-crop-upload是一个基于Vue.js的图片裁剪和上传组件。它可以让用户在前端页面上对图片进行裁剪，并将裁剪后的图片上传到服务器。该组件支持多种图片格式，包括jpg、png、gif等，并且可以自定义裁剪框的大小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值