Vant Weapp（微信小程序）Uploader 文件上传没有删除功能

最新推荐文章于 2024-04-23 16:19:46 发布
最新推荐文章于 2024-04-23 16:19:46 发布
阅读量4.1k 收藏 4
点赞数 4
文章标签： 小程序 js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45670926/article/details/113105219
版权
本文介绍了在使用Vant Weapp的Uploader组件时遇到无法删除已上传图片的问题，通过查看源代码发现存在delete方法。通过监听该方法，获取点击删除的图片下标，并使用数组splice方法删除对应图片，然后更新数据并传递给父组件，实现了删除功能。
摘要由CSDN通过智能技术生成

Vant Weapp（微信小程序）Uploader 文件上传没有删除功能

简单来说就是vant源文件有个delete方法可以传给父组件，点击那个小错号，然后我这边接受发现点击能获取下标，然后我就根据下标删除图片

最近使用vant小程序ui时发现上传了图片竟然不能删除，这就很尴尬了!
首先右键检查一下元素(上传图片左上角的小错号)
在这里插入图片描述
发现删除图标有个方法deleteItem去查找原代码
在这里插入图片描述
#发现源代码有个delete方法可以传给父组件，父组件接收一下看看有什么
在这里插入图片描述
发现给了点击删除按钮的下标。这就简单了用数组splice方法删除这个下标图片，删除完成后把图片再给父组件，删除成功

注：第一个父组件是基于vant原文件然后自己写的components，第二个父组件是使用自己的components
1.在这里插入图片描述
2.

最低0.47元/天 解锁文章
拷贝忍者 卡卡西
关注
微信小程序 vant weapp里面的上传upload组件研究
峰会路转的博客
11-04 1948
1.开发环境下，没有https域名的图片，在小程序模拟器里看不到上传的缩略图，但是官网确实可以显示的，问题不知道出现在哪里。vantweapp里面的上传组件看起来挺简单，用起来还是花了不少时间去做业务，现在记录下遇到的问题。2.删除图片不是简单写个deletable实行就可以，还要实现对应的删除方法。4.我这里没做上传前校验，可以上按照文档做。3.上传单张图片的方法与多图是有区别的。常见的功能就整理完毕了~~这样就可以同时上传多张。
微信小程序中使用Vant Weapp组件库
qq_60976312的博客
02-02 723
微信小程序中使用Vant Weapp组件库
vant-design中van-uploader组件的使用
baidu_36583119的博客
12-01 4950
参考： （1）Uploader 文件上传：https://vant-contrib.gitee.io/vant/#/zh-CN/uploader 我： （1）数据 data() { return { params: { image: '', }, imageList: [], // 预览图片列表 }; }, （2）布局 <van-form @submit="handleSubmit"&gt..
Vant Uploader 文件上传没有删除功能
u011747470的专栏
11-03 1752
<van-field name="rentIdImg1Arr" label="身份证正面照" :rules="[{ required: true, message: '请上传身份证正面照' }]" > <template #input> <van-uploader v-model="rent.
Vant Weapp小程序 van-uploader 文件上传点击无反应，删除无反应
coderYYY的博客
03-26 2057
van-uploader无法上传和删除解决方法
weui的uploader组件不显示删除按键
在下是小白的博客
09-25 439
感谢指引 使用delete属性怎么都不行是因为组件本身的属性名不是这个（文档好坑啊） 使用showDelete属性就可以了 要是对你有帮助可以点个赞，谢谢！
vant-uploader上传照片无法删除
Pomprogram的博客
04-16 5604
在微信小程序使用vant-uploader上传图片时，发现点击右上角的小叉叉无法删除图片，查看了源码： （源码位置：miniprogram\miniprogram_npm@vant\weapp\uploader\index.js） deleteItem: function (event) { var index = event.currentTarget.dataset.index; this.$emit( 'delete', __assign
vant weapp 多选上传图片_微信小程序：使用vant实现上传图片功能
weixin_39866087的博客
12-18 1357
使用vant的Uploader组件我们使用上传的组件是vant-weapp,这样可以大大的提高我们的开发效率。使用Uploader组件首先在全局配置app.js引入该组件，也可以在页面配置json中引入"usingComponents": {"van-uploader": "/path/to/vant/uploader/index",},复制代码新建uploader相关page，在uploade....
小程序结合Vant Weapp实现多张图片的上传和预览
前进加油
04-11 4275
小程序实现多张图片的上传和预览，一步到位
vant van-uploader 微信内置浏览器 手机拍照 出现刷新或闪退
最新发布
qq_27936291的博客
04-23 1433
根据产品业务，需要在h5页面调用手机的拍照，出现了页面刷新或闪退： 1. 这是微信内置浏览器内存不足导致的，安卓手机此问题常见，尤其是红米低端机出现概率跟高（自己就是用的红米手机）； 2. vant官网在van-uploader组件介绍页面的最下面也说了有这个问题； 3. 使用input标签，调用拍照也是一样的页面刷新或闪退 4. 是安卓自身的原因
【Vant Weapp】van-uploader 文件上传
joanmelon的博客
11-27 6251
进入页面onload就要去调取接口，获取回填的数据。getPicture是获取数据的接口，可以自行换成自己的。）,而后端要求是去除域名（xxxxx.png），所以我另外封装了一个imgs数组。fileList的图片要求的是全路径（
从此再也不用担心图片上传难题！一起来掌握Vant的Van-Uploader插件和jQuery技巧
廖圣平
03-09 920
我们首先将上传的文件添加到fileList中，然后创建一个新的FormData对象，并将文件添加到其中。接下来，我们使用jQuery的ajax()方法将FormData发送到服务器。在这里，我们需要将contentType和processData设置为false，这样jQuery就不会对数据进行自动处理。
vant weapp 多选上传图片_vue 中使用vant-ui van-uploader插件上传多张图片
weixin_39761645的博客
12-18 1246
html scriptexport default {name: "banner",data(){return{realName:'',phone:'',imgHeader:'',fileList: [],mod_pic_one:'',mod_pic_two:'',mod_ping_img:'',postData:[],mod_pic_list:[],mod_banner_name:...
van-uploader 二次封装，多图片上传到服务器，从服务器进行删除图片
weixin_54423679的博客
07-06 1303
最近写的一个h5项目，我采用的是vant-ui ，图片上传算是无可避免的，所以根据需求进行二次封装van-uploader。
Vue2 | Vant uploader实现上传文件和图片
Igiveufireworks的博客
09-12 8493
需求：实现图片和文件的上传，单个图片超过1M则压缩，全部文件加起来不得超过10M。
vant van-upload 的使用
hjh15827475896的博客
04-18 4943
如果是单图片的上传， 可以不用使用 fileList 我的这样个博客有说明 用户头像修改 van-upload是 vant 中解决文件上传的一个组件，同时它还具备上传之后的回显功能，但是它的回显是通过本地的缓存文件显示的， 而我们的上传文件的时候， 后台会返回一个上传文件的地址，我们在提交上传文件的时候， 是把返回的文件地址传给数据库进行保存的， 所以我们要 把文件上传的地址保存到 fileList 变量中的， 但是如果我们简单的把上传过后的返回地址push到 fileList中， 我们可以看到， 文件的
Vant Uploader 上传图片功能
CSSAJBQ_的博客
11-24 7731
【代码】Vant Uploader 上传图片功能。
vant uploader 支持图片或视频上传
w_jiunian的博客
06-19 4712
<van-uploader v-model="fileList" preview-size="calc(28.7vw)" :max-count="9" accept="*" max-size="300 * 1024" preview-full-image :after-read="afterRead" @oversize="oversize" > <template #preview-cover="{ file }".
微信小程序Vant Weapp组件库引入与使用指南
在微信小程序开发中，使用Vant Weapp组件库是一个常见的选择，因为它提供了丰富的UI组件和易用性。以下是通过该库实现快速上手的步骤： 1. **引入Vant Weapp组件库**: - 首先，确保你的项目已经初始化，如果尚未...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值