vue-Cropper 重复上传同一张照片没反应问题

最新推荐文章于 2023-03-30 10:00:17 发布
最新推荐文章于 2023-03-30 10:00:17 发布
阅读量797 收藏 3
点赞数 1
分类专栏： javascript vue 前端 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41312395/article/details/108093747
版权
javascript 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
vue
9 篇文章 0 订阅
订阅专栏
前端
9 篇文章 5 订阅
订阅专栏

vue-Cropper 重复上传同一张照片没反应问题

因为项目要求要使用vue-Cropper裁剪图片

但是发现…如果两次选择同一张图片就处不来东西
然后看其他人的博客就是
在这里插入图片描述
emmmmmmmm
本人小白表示不懂，然后发现…
在这里插入图片描述

这特喵的不就是input吗？？？

wdnmd，被自己蠢哭了

然后在input加一个value就好了

在这里插入图片描述
然后 在你@change=“getupload_YUImg” 执行的函数里 设置他为空就好了
在这里插入图片描述

总结一下

就是他选图片的时候用的是@change方法
当你选择完毕之后，一些东西会到input框里
他是根据这个input框判断后面该怎么走

但是这个方法只有在内容改变的时候才回去调用，两张图片一模一样，input框里的东西也一样，所以下面的getupload_YUImg（）函数就不会执行

别想了，用@click肯定不行，因为他是个隐藏域，肯定不会让你点的

PS:

对了，上面说的 “其他人的博客”是这位兄弟的 点我跳转

本人小白~~初来乍到，请多指教

Black Knights
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
直播平台制作，vue图片上传，重复上传相同路径图片
云豹网络科技
05-22 91
以上就是 直播平台制作，vue图片上传，重复上传相同路径图片，更多内容欢迎关注之后的文章。直播平台制作，vue图片上传，重复上传相同路径图片。
cropper.js上传同一张第二次不显示问题
weixin_44118181的博客
06-22 394
这里记录一下cropper.js裁剪上传同一张第二次不显示cropper.js问题 原因：input选中图片后value中已存在了图片路径，再次选中同一张不会触发change事件 解决：在取消裁剪的时候，给input的value清空，$(’#input’).val(’’) （根据你的代码放在合适位置，这里是我个人情况） ...
vue-cropper图片裁剪插件第二次打开无法改变裁剪框大小和位置问题解决
qq_39234840的博客
06-19 4948
好用的图片裁剪插件vue-cropper vue-cropper图片裁剪插件文档：https://github.com/xyxiao001/vue-cropper#vue-cropper 效果预览http://github.xyxiao.cn/vue-cropper/example/ 问题：无法改变裁剪框大小和位置 其中:img="option.img" 的赋值必须在 el-dia...
vue重复上传同一个文件无响应不会触发回调事件
陈新科的博客
09-28 1631
v-if=”clearShow”，初始化数据为true，在change事件触发的函数里设置clearShow为false，即移除了该input标签，然后在回调函数中再设置clearShow为true，这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。change事件触发条件是文件上传框内容改变才可以，每次上传完文件默认是不清空上一次上传的内容的，这样上传同名文件就不会触发change事件。网上现有的方法就是重置input上传文件的标签的dom结构，在vue里我的实现方法就是v-if去控制。
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
vue-upload-cropper:结合 ELUpload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装
05-10
vue-upload-cropper结合 element-ui upload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装DemoNotices使用条件：使用 elementUI编译环境安装并配置 babel-plugin-transform-vue-jsx，babel-plugin-syntax-...
vue-cropper 使用demo。 基于 vue3，实现 旋转，缩放，控制裁剪，选择阈值，上传图片等功能。
03-18
使用 vue-cropper + vue3 + typescript + element-plus 1. 主要组件 vue-cropper 2. ui组件基于element-plus 3. 开发框架 基于vue 3.2
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
04-29
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
vue-avatar-cropper：一个简单而优雅的头像裁剪和上传插件
02-06
Vue头像作物 :girl: 一个简单而优雅...$ npm i vue-avatar-cropper 用法 < button id = " pick-avatar " >Select an image</ button > < avatar-cropper @ uploaded = " handleUploaded " tri
Vue3.0使用vue-cropper遇到的问题
PhilipJ0303的博客
03-30 1845
报错原因并非因为上述 原因，归根结底是在Vue3中不能使用this后，我们使用了单独的一个变量通过getCurrentInstance()方法返回当前实例的对象，这会导致在开发环境执行的时候，使用。在使用vue-cropper工具过程当中遇到这样一个问题，开发环境启动运行之后，截图功能可以正常使用，但是重新打包部署至服务器以后，报错：cropper未定义。可以正常执行，但是到了部署的环境，是未定义。之后想着在前端界面打个断点看看，结果就发现以下情况。这块的cropper未定义，所以去定义并给他赋值。
vue element+vueCropper 关闭dialog不刷新，再次打开还是原来的图片 解决办法
weixin_53898445的博客
02-15 991
只要给dialog加一个 v-if就能解决了，不用写dialog打开的回调函数也能实现
vue-cropper 截图插件的使用
kangkang_style的博客
09-19 1万+
安装插件： npm install vue-cropper --save-dev 引用： import vueCropper from 'vue-cropper' 声明： components: { vueCropper } &lt;vueCropper ref="cropper" :img="option.img" // 裁剪图片的地址 可选值：url 地址 || ba...
基于cropper.js封装vue在线图片裁剪组件
lis2b的博客
09-20 1万+
github:demo下载cropper.js github:cropper.js 官网（demo） cropper.js 安装 npm或bower安装 npm install cropper # or bower install cropper clone下载：下载地址 git clone https://github.com/fengyuanchen/cropper.git引用cr
web前端在线预览，编辑word文件的方法汇总（2021-7-14更新）
热门推荐
qq_41312395的博客
11-02 3万+
预览doc文件的方法首先我要声明，纯前端无法实现doc文档预览，只能通过其他手段（如第三方，或者自己通过和后端大大沟通）1.微软提供的 office在线预览地址：2.docx3. officeweb365.com4.kkFileView5. 后端大大配合你实现6.总结以上 声明：如果怕收费或者其他的什么，请直接点击第5点，让后端大大配合你实现 首先我要声明，纯前端无法实现doc文档预览，只能通过其他手段（如第三方，或者自己通过和后端大大沟通） 1.微软提供的 office在线预览地址： https://vi
vue+element 实现试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
qq_41312395的博客
12-16 1万+
vue+element 实现 试卷答题功能，单选题 ,多选题，判断题，简答题 文章目录vue+element 实现 试卷答题功能，单选题 ,多选题，判断题，简答题难点：一、后端返回数据（）二、页面1.html2.js - 答题部分3.js - 回显部分总结 难点： 如何循环不同类型的题 如何记录点击的是哪道题，并且分清楚他是单选还是多选 单选还好，多选的话不能出现点了一道题，其他题的答案都是点击的这个选项 回显的时候如何再把值赋上去 附加功能：设置开始时间和结束时间，未到时间不可答题（后端做判断）
ruoyi-UI （若依）微服务版 vue前端使用及分析（2021-4-13更新）
qq_41312395的博客
03-26 1万+
ruoyi-UI vue前端版本（应该不算标题党） 1. 目录结构 3. 重点文件夹，文件解析 views/login.vue decrypt（）解密 /utils/jsencrypt.js encrypt（）加密 /utils/jsencrypt.js 页面加载的时候就是一个记住密码的功能，调的cookie 然后点击确定（handleLogin）的时候，调用permission.js的beforeEach函数 然后乱七八糟走了一大堆，然后调的store/modules/user.js里面的登
前端vue + websocket 的坑
qq_41312395的博客
06-06 6771
vue + websocket 的坑 记录一下在开发过程中的坑，不封装，没有插件，不使用vuex，纯小白写法（我就是小白本人） 本内容分为自己搭的测试环境和后端对接两个部分 因为一些原因，要保持与服务端的同步，然后使用了websocket，不说废话，上代码。（其实我觉得每1秒请求一次接口也行，但是考虑到实时性的问题，em…） 1. 自己搭建的node环境 每500毫秒给用户推送消息 自己搭建的node环境的前端测试代码： created() { //页面刚进入时开启长连接 this.i
vue-cropper上传服务器
最新发布
09-06
在Vue项目中使用vue-cropper插件可以实现图片裁剪并上传到服务器。首先，你需要安装vue-cropper插件，可以通过以下步骤进行安装： 1. 在项目中运行以下命令安装vue-cropper插件： ``` npm install vue-cropper ``` 2. 在Vue组件中引入vue-cropper插件： ``` import { VueCropper } from "vue-cropper"; ``` 3. 在Vue组件的`components`选项中注册vue-cropper插件： ``` components: { VueCropper } ``` 接下来，你可以在Vue模板中使用vue-cropper插件实现图片裁剪。你可以参考以下代码示例： ```html <template> <div> <vue-cropper ref="cropper" :src="imageSrc" :output-size="outputSize"></vue-cropper> <button @click="cropImage">裁剪图片并上传</button> </div> </template> <script> export default { data() { return { imageSrc: "", // 待裁剪的图片路径 outputSize: { width: 200, height: 200 } // 输出的图片大小 }; }, methods: { cropImage() { const cropper = this.$refs.cropper; const croppedImage = cropper.getCroppedCanvas().toDataURL(); // 获取裁剪后的图片 // 将裁剪后的图片上传到服务器 // ... } } }; </script> ``` 在上述代码中，首先引入了vue-cropper插件，并注册为Vue组件。然后，在Vue模板中使用`vue-cropper`标签来显示图片，并使用`ref`指令给vue-cropper组件添加一个引用。通过点击"裁剪图片并上传"的按钮，调用`cropImage`方法来获取裁剪后的图片数据并上传到服务器。 请注意，以上只是一个基本示例，你需要根据你的具体需求进行适当的修改和调整。同时，你还需要编写相应的后端代码来接收并处理上传的图片数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue3+vue-cropper图片裁剪个人使用记录](https://blog.csdn.net/m0_62317155/article/details/131691932)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [在vue中使用vue-cropper实现图片裁剪并上传服务器](https://blog.csdn.net/weixin_52921391/article/details/121102132)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值