uniapp uni-file-picker @delete删除时候不知道删的是第几个，真坑，用着他的组件写着代码还得改着他的源码

已于 2024-03-20 00:50:55 修改
阅读量1.1k 收藏
点赞数 1
分类专栏： 前后端学习日记 小袁同学3k5的工作日常 文章标签： uni-app
于 2024-03-20 00:50:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/obliv/article/details/136859567
版权
文章讲述了作者在处理正常删除操作时，由于项目使用阿里云OSS存储，本地文件地址无实际用途。因此，他们在组件源码的`delFile`方法中添加了文件删除的索引计数，以便在删除事件中获取所需信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

正常删除触发事件中返回个文件地址那些东西
在这里插入图片描述
根本没什么用
因为这个项目是上传阿里云oss的，所以上传之后获取网络地址就可以给后端传参了，所以本地地址一点用没有，我只是想在删除的时候知道删了第几个就行。

于是、改源码吧
组件源码中找到这个delFile
在这里插入图片描述
里面加一个index，改完这个样子
在这里插入图片描述
改完记得重新编译下哈
之后的delete事件就有我想要的index索引了
在这里插入图片描述
真坑！

uniapp上传、预览、删除图片
qq_53089988的博客
02-11 1097
效果图如下： 代码如下所示： <template> <view class="upload-img"> <image src="/static/logo.png" class="img" @tap="onGetImgClick"></image> <view class="uni-list list-pd"> <view class="uni-list list-pd"> <v...
uniapp中的uni-file-picker组件上传多张图片到服务器，可添加，预览，删除图片
weixin_51014776的博客
12-18 1万+
uniapp中的uni-file-picker组件上传多张图片到服务器，可添加，预览，删除图片
uniapp uni-file-picker 组件删除时增加二次确认弹框
weixin_45631278的博客
02-08 2941
uni-file-picker 删除二次确认
uniapp中的uni-file-picker组件图片上传，删除
最新发布
前端开发
10-16 554
【代码】uniapp中的uni-file-picker组件图片上传，删除。
uniapp：uni-file-picker 手动上传删除文件后不能再上传的bug
这家伙很懒，什么都没留下
02-24 983
目前解决办法是要修改下uni-file-picker的源码，相关代码已经向uni-ui提了PR，可以在这里查看详情。如果PR被Merge，那下载最新uni-file-picker就行。
uni-file-picker进行图片上传，回显的时候可以删除
Frank_colo的博客
01-22 1808
【代码】uni-file-picker进行图片上传，回显的时候可以删除。
uniapp中的uni-file-picker组件多图上传问题
m0_54861649的博客
02-23 1324
前言：在uniapp官方文档中的uni-file-picker组件可实现图片上传功能，官方文档：uni-app官网 中的案例不能完全满足需求，在接口上传失败的时候，需要页面不回显失败的图片，仅回显显示上传成功的图片，因为多图异步上传顺序的问题，可能会导致同时操作list，以至于删除图片出错。所以我才用多图同步顺序上传来规避这个问题。 以下是代码： view代码： <uni-file-picker :value="filePathsList" :auto-upload="false" file-medi
uni-file-picker的@delete方法
07-27
uni-file-picker组件是基于uni-app开发的文件选择器组件，用于选择文件并上传。该组件提供了一些方法，其中包括@delete方法。 @delete方法用于删除已选择的文件。当用户选择文件后，可以通过调用@delete方法来删除...
uni-file-picker的@delete的返回值详解
07-27
uni-file-picker组件的@delete事件是在用户点击删除按钮并确认删除文件后触发的。该事件的返回值是一个对象，包含以下属性： 1. `index`：被删除文件的索引值，即在文件列表中的位置。 2. `file`：被删除的文件...
uniapp项目中使用＜uni-file-picker＞＜/uni-file-picker＞，实现限制用户上传图片大小，并不回显（vue3+ts）
m0_74081716的博客
02-11 2517
在使用uniapp组件时，想实现限制用户上传图片大小时，发现虽然可以通过监听@select="onSelectImg"事件拿到本次上传的数据，在后续发送时也可以通过判断event.tempFiles来获取图片size但数据还是会回显。其实这里也有很大的坑，感觉他这绑了又好像没有帮，但回显数据确实可以利用其修改，通过控制台打印，可以知道其值类型和触发搜索时event.tempFiles的类型一致，这里需要用到。
uni-app上传图片功能，点击 对应图片 实现删除
qq_45511353的博客
12-01 1820
<template> <view class="" style="padding: 10px;"> <view class="uploadstyle" @click="addPicture" v-if='tempFilePathsEditor.length == 0'> <image src="../../static/img/unloadPho.png" mode="" style="width: 150upx;height: 150upx;"&g
uniapp 图片文件选择、上传、预览、删除
STR少寒的博客
06-10 1688
uniapp 图片文件选择、上传、预览、删除
uniapp——常用逻辑实现
fy03164598的博客
11-17 2647
需要注意的是，这里我们用于展示的是本地的图片地址，当我们想要删除上传列表中的某一张图片时，我们需要将线上的对应图片地址也移除掉，这时候组件原有的delete方法不能够满足我们的需求，因此我们需要更改以下组件的内置方法。按照图上进行delete方法进行修改，添加一个index也就是所选图片的索引作为提交值，然后我们就可以根据index对线上图片数组进行删除。注意SplitArray方法是自定义的方法，配置到vue的$util实例上。这里使用的是uniapp官方的上传组件 uni-file-picker。
uniapp 使用uni-file-picker 进行表单多文件/图片上传
m0_73419038的博客
03-14 9620
我这里是进行了一个正常的表单多文件上传。
uniapp的请求封装（含post ,get,put ,delete）
qq_44984407的博客
06-10 1万+
最近使用uniapp写小程序，但是没有合适的数据请求，于是自己熬夜写了一个。 下面是对于代码的解释: 请求的初步封装 export default class request { // 配置项 constructor(options) { //请求公共地址 this.baseUrl = options.baseUrl || ""; //公共文件上传请求地址 this.fileUrl = options.fileUrl || ""; //默认请求头 this.header =
uni-app上传图片及表单数据
wuqingdepiaoke的博客
07-04 3149
上传图片及表单数据uni-app完整代码
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
热门推荐
路虽远行则将至，事虽难做则必成。
06-19 2万+
最近在使用uni-app写H5移动端，有一个从手机拍摄从相册选择获取图片上传到文档服务器功能。查阅uni-app发现关于上传图片，uni-file-picker文件上传，uni.chooseImage，uni.uni.uploadFile它和pc端原理差不多，都是file对象上传，PC端是通过new file对象，uni-app是直接提供了。
uniapp产品编辑页-图片上传后回显编辑-组件uni-file-picker显示之前已上传的图片 + 头像图片原地覆盖上传示例
Rudon滨海渔村的博客
10-20 8538
uni-file-picker显示之前已上传的图片。uni-file-picker显示之前已上传的图片。头像图片原地覆盖上传（不显示删除按钮）头像图片原地覆盖上传（不显示删除按钮）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小袁同学.

赏个早餐吃？

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值