图片删掉，上传其他图片，删掉的图片又显示出来

已于 2022-06-15 17:08:23 修改
阅读量446 收藏
点赞数 1
文章标签： onShow onLoad 图片初始化 数据请求 状态管理
于 2022-06-15 17:03:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45729136/article/details/125300469
版权

例子:图片初始化在onShow（）中，删除图片后出现上传，删除的图片仍然显示出来。

分析问题：数据在onShow（）进行请求，那么一旦数据发生变化（比如进行其他请求），就会执行onShow（），即赋值时，使用的是初始化的数据

解决方法：最简单粗暴的方法，不在onShow（）中初始化，将初始化写在onLoad（）中。

weixin_45729136
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue删除图片同时删除本地文件_基于VUE选择上传图片并页面显示（图片可删除）_奈落_前端开发者...
weixin_35909443的博客
01-12 519
基于demo例子：依赖文件：jqueryform相关照片上传照片提交/*** 从 file 域获取 本地图片 url*/function getFileUrl(obj) {let url;url = window.URL.createObjectURL(obj.files.item(0));return url;}export default {name: 'accident',// 定义数据da...
Avue的upload数组图片上传以及删除后上传又出现的问题
wupinlong的博客
12-29 7292
近期使用Avue开发上传图片碰到了一个问题，官方也有这个问题，在此记录一下这个问题。 Avue官网的avue-crud的type=upload有一个array类型的，出现是下面图的样子 注意坑：按理说我们点击删除一个图片就剩下一个，然后上传一个又变成两个了，结果不是你们想的那样，删除一个，上传一个，结果是三个，删除的没有真正的删除，你们可以去Avue官网去看看这个坑 看坑链接 1.删除 2.上传 是不是很神奇，那该怎么去解决呢？那我们继续往下面看 注意看注释！！！ 注意看注释！！！ 注意看注释！！！
已删除图片资源仍旧显示的问题
weixin_30270889的博客
05-09 462
为了写这个博刚刚想再现这个场景发现已经没问题了。虽然不知道什么情况，记下来以备不时之需。 有时候明明在assets里把资源个删了，但是storyBoard的设置栏里面仍旧还有。 方法一：适用于几乎所以正常情况 option前往资源库，把这个项目的文件全部删除 方法二：我这次的问题 以源代码形式打开storyBoard然后搜索多出来的资源。基本上会发现是因为其实...
uniapp中的uni-file-picker组件多图上传问题
tgs2033的博客
02-21 4976
前言：在uniapp官方文档中的uni-file-picker组件可实现图片上传功能，官方文档：uni-app官网 中的案例不能完全满足需求，在接口上传失败的时候，需要页面不回显失败的图片，仅回显显示上传成功的图片，因为多图异步上传顺序的问题，可能会导致同时操作list，以至于删除图片出错。所以我才用多图同步顺序上传来规避这个问题。 以下是代码： view代码： <uni-file-picker :value="filePathsList" :auto-upload="false" file-medi
el-upload删除文件后修改文件仍然存在
滕青山博客
01-13 1567
解决方法： 在el-dialog关闭后手动置空el-upload绑定的文件列表
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
10-15
12. `on-exceed`：当上传图片数量超过限制时触发，可通过 `limit` 属性设置最大数量。 在 Vue 的数据对象 (`data`) 中，我们需要声明一个用于存储文件列表的数组，例如 `images`。在 `mounted` 生命周期钩子中，...
Ajax图片上传带缩略图源码
08-01
程序带有图片上传 综合管理（添加 删除 图片配备文字信息） 数据库为SQL2005 放置在DB文件夹下 ------------------------------------分割线-------------------------------------- 问题是图片无刷新可以上传，我想...
KindEditor应用实例——“轻量级”（删掉了上传图片的功能）
10-25
说明：本工程中的KindEditor删掉了上传图片的功能，所以是一个“轻量级”的KindEditor，“重量级”的KindEditor的应用请参考另一个例子。 本工程编码方式：UTF-8。 使用的数据库:MySQL; 数据库创建：CREATE DATABASE...
fckeditor编辑器上传文件（含视频音频）详细配置
05-23
最近做了一个文章管理的系统，用到在线编辑器，修改了一下现在能实现音频，视频，图片，附件，Flash等文件的上传。费了好大的功夫。。 FCKeditor应用在ASP.NET上，需要两组文件，一组是FCKeditor本身，另一个是用于...
网钛文章管理系统 V2.91最新版
09-30
8、支持批量上传图片或文件，并可选择已上传的图片文件，避免重复上传； 9、支持附件上传 10、支持在文章内容的末尾自动添加上如转载声明之类的附加内容，增加外链； 11、设置关键字及链接，自动在文章内容中...
图片img的src不变让浏览器重新加载实现方法
12-09
javascript给这个img标签的src属性后面拼接一个 ? 和 javascript对象new Date().getTime()毫秒值做成queryString的样子，就能防止被缓存了在图片地址src不变的情况下让浏览器重新加载图片 实际上，在src不变时，浏览器直接就去读取缓存了 解决办法： var img_src =’http://huoche.7234.cn/images/jb51/gi2rp4tu0vm.jpg?t=’+Math.random(); 这样给图片地址拼接一个随机数，用js重新给 img 的 src 赋值，okay
点击上传图片，删除后显示上传前的图片
m0_65145262的博客
12-22 218
点击上传图片，删除后显示上传前的图片
删除图标资源后还是可以显示图标的疑惑
werflychen的专栏
12-02 1150
<br /><br />    昨天下午，在工程中，把一个图标的资源在文件夹中移到桌面后，重新编绎了一下.rc文件，奇怪的一幕发生了。在原来显示图标的位置，居然还是显示了这个图标。百思不得其解，后来，在整个项目中搜索文件，确实已经搜不到该图标文件了。后来便开始怀疑MS的资源编绎是不是出错了，删掉了生成的.res文件，并把VS重新启动，不行。后来干脆把整个Solution重新编绎，还是不行！莫非？傻就傻B一点吧，我把电脑也重新启动一下。还是不行，这下子，我可真的假了。<br />    后来跑到另一个同事的机
Vue之AntDesignVue之「a-upload」上传文件列表删除列表中的某个待上传文件时，出现预期想删除的文件与实际删除的文件不一致的问题
CCYGGUVG的博客
07-02 9951
这是官网的参考方法 于是参考此方法，采用beforeUpload 返回 false 后，手动上传文件的上传方法。 这是我的写法 <template>: js: @change remove: before-upload: 浏览器效果: 添加一个: 添加第二个: 此时删除最后上传的'测试2.txt'文件，最终结果确实是符合期望的，但是能看到文件列表fileList[]的数组下表index为-1，已经显示异常 如果先删除最先上传的...
element-ui 上传图片后清空图片显示
热门推荐
lx_1024的博客
05-16 1万+
使用element-ui，使用el-upload上传图片，上传图片后再次打开还是会有原来的图片，想要清空原来上传的图片，只需要在组件上绑定ref，在提交成功后的方法里调用this.$refs.upload.clearFiles();就可以清除原来上传的文件。具体如下：&lt;el-upload ref='upload' class="upload-demo" action="https...
【bug解决】上传图片后，取消这次上传 再次执行上传，上次的图片还存在
weixin_45650440的博客
11-22 1031
第一次上传的图片路径，要在清除事件后，重新调接口将路径置为初始的图片路径 <img> </img> // 清除上传 clearInfo(){ this.loading = '../../require/xxx.jpg' //初始的图片路径 }
Java文件上传(狂神+人人开源)(样式待优化/图片显示)+读取文件到数据库+EasyExcel使用
qq_41460185的博客
10-09 871
搭建环境 1、创建一个空的Maven项目 1）选择JDK 2）new module 3）配置tomcat 2、导入jar 利用maven导入 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> &
Android 删除图片后刷新媒体库
唐诺
03-24 2320
有时候在App内删除了图片，调用图片选择器会看到删除了的图片还存在（显示不出来），这是由于图片被删除了，但是媒体库的记录还存在，没有同步刷新造成的，手机重启后媒体库会被刷新。 我们可以在删除文件后调用如下代码刷新媒体库： 情况一： 删除单张图片，知道准确的图片路径时： /** * 刷新媒体数据，让文件立刻显示在相册中 * * @param mContext ...
uniapp上传和长按删除图片
qq_44871531的博客
10-24 377
uniapp上传和长按删除图片
vue3点击按钮将遍历出来的当前图片删掉
最新发布
06-08
可以通过以下步骤来实现： 1. 在Vue组件中定义一个数组，用于存储图片列表。 2. 在页面中遍历该数组，将每个图片显示出来，并为每个图片绑定一个点击事件。 3. 点击事件中获取当前图片的索引，然后从数组中删除该图片。 4. 在页面中重新遍历数组，显示更新后的图片列表。 例如，以下是一个删除图片的Vue组件示例代码： ```javascript <template> <div> <div v-for="(image, index) in images" :key="index"> <img :src="image.url" alt="image" @click="deleteImage(index)"> </div> </div> </template> <script> export default { data() { return { images: [ { url: 'image1.jpg' }, { url: 'image2.jpg' }, { url: 'image3.jpg' } ] } }, methods: { deleteImage(index) { this.images.splice(index, 1); } } } </script> ``` 在上述示例中，我们定义了一个`images`数组，其中包含三个图片对象。在页面中使用`v-for`指令遍历该数组，并为每个图片绑定一个点击事件`@click="deleteImage(index)"`。在`deleteImage`方法中，我们获取当前点击的图片索引`index`，然后使用`splice`方法从数组中删除该图片。最后，Vue会自动更新页面中的图片列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值