vant-uploader上传照片无法删除

Vant Uploader上传文件 + 提交按钮上传(前后端) 安卓版PDA对设备故障进行报修。①在提交表单的时候需要同时提交故障照片,②图片单选。 上传组件使用了 `Vant v2.12.47` 中的 Uploader 组件,但是官方文档只是对单个组件的前端说明。最近才开始用 Vant,不太熟悉,在网上找了些使用方法,感觉零零碎碎的,而且不知道后端代码如何承接参数。在此做一下使用方面的代码总结。 阅读详情

在微信小程序使用vant-uploader上传图片时,发现点击右上角的小叉叉无法删除图片,查看了源码:

(源码位置:miniprogram\miniprogram_npm@vant\weapp\uploader\index.js)

    deleteItem: function (event) {
      var index = event.currentTarget.dataset.index;
      this.$emit(
        'delete',
        __assign(__assign({}, this.getDetail(index)), {
          file: this.data.fileList[index],
        })
      );
    },

发现里面点击删除只是向父组件传递了一个名为’delete’的事件,该事件包含点击的图片的下标。为了达到删除的目的,我们还需自己定义对应的删除函数。

解决方法:
在XML里获取delete事件,其中’deleteImg’为自定义的删除照片的操作:

    <van-uploader catch:delete="deleteImg" preview->      
   
    </van-uploader>

在JS里,写自己需要进行的操作:

  deleteImg(event){
    let index= event.detail.index
    console.log(index)//输出的就是图片所在fileList的下标,自己根据需要进行操作就行
  },
Vant Uploader单图上传与表单提交的实战指南(前后端协作) 本文详细解析了使用Vant Uploader组件实现单图上传,并与表单数据协同提交至后端的完整实战流程。重点阐述了如何通过FormData对象整合文件与表单字段,并对比了同步与异步两种前后端协作策略,为移动端开发中常见的“表单+图片”提交场景提供了清晰的解决方案。 阅读详情

相关推荐

Vant Weapp小程序 van-uploader 文件上传点击无反应,删除无反应,上传到云存储报错地址错误

van-uploader无法上传和删除解决方法

coderYYY的博客 3230

vant 图片上传 删除

【代码】vant 图片上传 删除。

FANSILVLV的博客 1187

基于STM32的HC-SR04超声波模块测距(新手级)

本人是嵌入式新手,学习了STM32的部分内容,最近想找些项目做,然后顺便学习了一下HC-SR04超声波模块,学习过程中也参考了一些大佬的文章。本文记录了自己的学习方法和学习过程,同时也希望能和各位大佬交流讨论。

weixin_63758495的博客 2206

formData 文件上传

@TOCformData 文件上传 1 html中使用<input type=‘file’ ref=‘file’> 2 点击上传时 let file = this.$refs.file.files[0]; let formData = new FormData(); formData.append(‘file’, file); // 当最后数据上传时 所有的参数都应该为formData 格式 3 设置请求头 Content-Type: multipart/form-data 最后如果 form

weixin_43912401的博客 535

Quest 3开发第一步:搞定Meta账号登录和Oculus软件连不上设备的那些坑(2024实测)

本文详细介绍了Quest 3开发初期的关键步骤,包括Meta账号注册、Oculus软件安装与设备连接等常见问题的解决方案。针对国内开发者遇到的邮箱限制、验证码接收等难题,提供了实用的应对策略,并分享了开发环境配置和常见问题排查技巧,帮助开发者快速搭建Quest 3开发环境。

weixin_30333885的博客 495

VsCode+JLink+GCC替代Keil开发GD32程序-个人总结

对个人使用vscode+Jlink开发GD32程序做了总结,供需要者参考。

MyCollege1999的博客 2764

van-uploader上传文件以及删除文件

<div :class="postData.length>2?'upload-img-5':'upload-img-1'"> <div class="posting-uploader"> <span v-for="(item,nn) in postData" :key="nn"> &l...

有问题可关注公众号:前端研究院 后台输入问题回复 2万+

基于一维卷积神经网络对机械振动信号进行分类并加以预测

基于一维卷积神经网络对机械振动信号进行分类并加以预测 *使用一维卷积神经网络训练振动信号进行二分类 2020年7月16日,一学期没等到开学,然而又放假了。 总览优快云中大多数卷积神经网络都是对二维图片进行分类的,而图片也都是常见的猫狗分类,minst手写数字分类。一维卷积神经网络的使用非常少见,有也是IDMB情感分类,和鸢尾花分类的。 作者研究生就读于河北一所双飞,全国排名270多,哈哈哈,不吹不黑。 在网上翻来翻去找不到一篇可以利用的代码去研究我的机械故障诊断,后来在无奈下到某宝搜寻到一段代码,可以利用

qq_45714906的博客 1万+

微信小程序使用van-uploader实现图片上传、预览与删除

【代码】微信小程序使用van-uploader实现图片上传、预览与删除。

Jane0129的博客 3010

告别混乱!在Unity中为Best MQTT v3设计清晰的服务层:配置、连接、订阅发布模块拆分指南

本文详细介绍了如何在Unity中使用Best MQTT v3插件构建清晰的服务层架构,包括配置管理、连接服务、订阅管理和发布服务的模块化拆分。通过解耦设计、事件驱动和接口抽象,提升代码可维护性和可测试性,适用于物联网和实时通信开发场景。

weixin_30576827的博客 358

「分治法」最近点对距离问题

一、问题描述 给定平面S上n个点,找其中的一对点,使得在n个点组成的 所有点对中,该点对间的距离最小。 假设所讨论的点是以标准笛卡儿坐标形式(x, y)给出的。因 此,在两个点Pi =(xi , yi )和Pj =(xj , yj )之间的距离是标准的欧几里德 距离: d = 根号下( x i − x j ) 2 + ( y i − y j )2 二、问题分析 直接用暴力解法很简单,用结构体把每个点的x、y坐标都存下来之后,用一个二重循环即可获得距离的最大值。但是这样做的时间复杂度也达到了O(n的平方)

Laok0413的博客 9656

vant-ui的van-uploader上传图片

移动端上传图片是很常用的功能,这里使用vant-ui实现。 效果如图 上传图片的vue页面:Customer.vue html <div :class="postData.length>4?'upload-img-5':'upload-img-1'"> <p class="p-header">上传需要找的面料照片:</...

weixin_30279671的博客 8785

别再让CPU干GPU的活了:CST Studio Suite GPU加速深度调优指南(从驱动版本到任务管理器监控)

本文深入探讨了CST Studio Suite的GPU加速深度调优方法,从NVIDIA驱动版本选择到系统级资源管理,再到实时监控与瓶颈诊断技术。通过科学的驱动优化、GPU资源管理策略和高级调优技巧,显著提升仿真效率,特别适合电磁仿真工程师和硬件加速需求的专业用户。

weixin_28740299的博客 166

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

Vant Weapp(微信小程序)Uploader 文件上传没有删除功能 最近使用vant小程序ui时发现上传了图片竟然不能删除,这就很尴尬了,但是这当然难不到我了,首先右键检查一下元素 发现删除图标有个方法deleteItem去查找原代码 发现源代码有个delete方法可以传给父组件,父组件接收一下看看有什么 发现给了点击删除按钮的下标。这就简单了用数组splice方法删除这个下标图片,删除完成后把图片再给父组件,删除成功 注:第一个父组件是基于vant原文件然后自己写的components,第二个父

盛典 4628

stm32教程之三重ADC交错采样

ps:本文基于stm32F407ZGT6单片机 stm32F4单片机单通道采集的最大采样率为2.4M,所以有时会难以满足较高频率的采样,于是查阅芯片手册,发现stm32F4支持多重ADC采集,利用每个通道的转换时间,错位采样,从而提高采样率,最大把采样率开到2.4*3=7.2M. (去年初学ADC时研究的,基于cube和HAL库的三重ADC交错采样参考资料不多,我也是研究了一段时间,写下这篇博客希望可以帮助到更多人。) 示意图如下: 以下是官方例子的说明, In this ex...

weixin_52178036的博客 8877

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

Vue——Vant-Uploader 上传一张或多张图片组件

Vant-Uploader 上传一张或多张图片组件 html部分 js部分

qq_25993655的博客 5450

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

vant-uploader实现formData图片上传

@[T + Shift + C 标记文本 删除文本 链接: link. 图片: 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片: 当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。 如何插入一段漂亮的代码片 去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片. // An highlighted block var foo = 'bar'; 生成一个适合你的列表 项目 项目 项目 项目1 项目2 项目3 计划任务 完成任务 创建一个表格

hellodiv的博客 1867

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

配合vant组件库封装一个uploader上传文件照片

【代码】配合vant组件库封装一个uploader上传文件照片。

qq_44307861的博客 1014

vant的uploader组件图片上传的一些问题

关于vant组件上传图片上遇到的一些问题 <van-cell required title=“事项图片” value=“(最多支持上传3张图片)” /> <van-uploader v-model="fileList" :before-read="beforeRead" :after-read="onReadIdCardback"

m0_46577631的博客 6836

小程序上传图片+Vant(可一次传多张图片)

小程序端上传图片,可一次传多张照片、预览、删除。

weixin_44422853的博客 2996

Vant Uploader 文件上传没有删除功能

<van-field name="rentIdImg1Arr" label="身份证正面照" :rules="[{ required: true, message: '请上传身份证正面照' }]" > <template #input> <van-uploader v-model="rent.

u011747470的专栏 1911

van-uploader上传图片

uploader 组件默认显示图片的数组,有具体格式[{url:"xxxxx图片地址" }]:max-size="5 * 1024 * 1024" 文件大小限制。:before-read="beforeRead" 上传图片前。:after-read="afterRead" 上传图片后。:before-delete="delImg" 删除图片时。deletable 是否显示删除按钮,默认false。:max-count="1" 最大上传图片张数。uploader列表类型,组件默认显示的图片。

m0_61601708的博客 3525

vue +vant + crodova实现图片上传、图片预览、图片删除

vue +vant + crodova实现图片上传、图片预览、图片删除 函数调用方法使用图片预览有坑,图片不显示 <template> <div class="add-check-page"> <head-com :title="title"></head-com> <van-form @submit="onSubmit"> <h2 class="van-doc-demo-block__title">添

MAYA_G的博客 2188

Vant Uploader实现上传一张或多张图片

Vant Uploader实现上传一张或多张图片

weixin_48409307的博客 2783

vue2使用vant组件库用Uploader组件时,给预览图片添加旋转按钮,并且使其进行旋转

首先我的思路以下 给图片预览上面加一个旋转按钮, 点击后顺时针旋转当前照片90度, 关闭预览,或切换照片,旋转恢复 vant的图片预览,也就是imagePreview组件,它提供了以下插槽 通过组件调用 ImagePreview 时,支持以下插槽: 名称 说明 参数 index 自定义页码内容 { index: 当前图片的索引 } cover 自定义覆盖在图片预览上方的内容 由于项目中之前使用得都是vant组件库中的Uploader组件,进...

snake3344的博客 4694

vue + vant 实现图片预览,删除,压缩,上传(2019.12.04)

template部分 <div> <van-uploader :capture="'camera'" v-model="fileList" :before-delete="afterDelete" :before-read="beforeRead" :after-read="afterRead" /> <div cla...

jininzhq的博客 8809
下一篇: 将python代码生成API接口
Pomprogram
博客等级 码龄9年 18粉丝 2原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值