van-uploader上传图片问题记录

已于 2024-03-05 14:38:21 修改
阅读量1.4k 收藏 2
点赞数 3
文章标签： 前端
于 2024-03-05 10:18:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41910886/article/details/136470852
版权

使用van-uploader（vant2）组件上传文件遇到的问题记录

  1. 部分手机唤起相册，选中图片后不显示图片
    描述：点上传图片可以唤起相册，选中图片后，不会执行before-read，组件恢复上传文件的样式
    解决：经测试，去掉multiple参数后就可以了
  2. 部分手机点上传图片无反应
    描述：据用户反馈，点上传图片无反应
    解决：一开始设置的是accept=“.png,.jpg”，后改为accept="image/png, image/jpeg"就可以了
    另：尝试设置result-type=“file”，在我的手机上上传图片后，图片一直显示加载中
Van Uploader解决Android11及以下系统上传图片无反应问题
chali1314的博客
03-03 336
解决van-uploader在Android11及以下上传图片无反应问题
Vue移动端地图App：van-uploader导致的卡顿问题
席木木的博客
07-03 514
基于Vue3+Vant IU 4开发的移动端地图App，在进行地图点位上报、上报记录查看过程中，出现App卡顿、甚至闪退的问题，进行问题定位之后，发现是van-uploader组件导致的问题。
APP根据图片地址进行64位转码方法
ygangying的博客
11-26 504
Vant组件（app） 网址：https://youzan.github.io/vant/#/zh-CN/quickstart <van-field name="driverLicense" label="图片"> <template #input> <van-uploader :after-read="onRead" v-model="driverList" :max-count="10" >
vant组件van-uploader(可多选)上传图片前对base64进行压缩
EnidChann的博客
03-23 2674
<van-uploader v-model="commentObj.imgModelList" multiple :max-size="5*1024*1024" :max-count="9" :before-read="beforeRead" :after-read="afterRead" :before-delete=".
Vant Weapp小程序 van-uploader 文件上传点击无反应，删除无反应
coderYYY的博客
03-26 2855
van-uploader无法上传和删除解决方法
van-uploader上传图片报错Invalid handler for event “load“(在uniapp编译)
qq_45331969的博客
10-26 1637
主要原因这里使用的vant版本是2.13.0的，在Hbuild里面运行的项目，vant插件在这里会有部分组件有兼容问题，（van-image，van-uploader等）。：主要是要实现图片上传功能，可以使用uniapp自带的上传组件（
vant 上传图片传参问题
热门推荐
楠的博客
06-21 1万+
// 上传图片 onRead(item){ return file =&gt; { let query = { file:file.content } console.log(item) comment.uploadImg(query).then(res=&gt;{ ...
Vant Uploader 上传图片功能
CSSAJBQ_的博客
11-24 7929
【代码】Vant Uploader 上传图片功能。
微信小程序云开发---vant组件 van-uploader 实现视频文件上传到云存储，发动态功能
需要点灵感
07-07 8172
pages/upVideo.wxml //获取用户的头像和昵称展示 <view class="headerBox"> <image src="{{userInfo.weixinInfo.avatarUrl}}"></image> <text>{{userInfo.weixinInfo.nickName}}</text> </view> //填写动态相关的信息，select为自定义的下拉选择组件 <view class="
vant2移动端的van-uploader的数据回显
最新发布
10-15
Vant UI 2.x 的 `van-uploader` 组件主要用于文件上传功能，它并不直接支持数据回显，因为数据回显通常是指在组件渲染时显示已有的上传记录或文件信息。要在vant-uploader中实现数据回显，你需要手动维护一个数据...
vue + axios+vant 实现图片上传-----（压缩+旋转+上传）
poppymilan的博客
08-10 1882
最近在写一个移动端图片上传的功能，查阅了一些资料，记录一下 我在实现上传图的时候，分三步一步步完善，先保证主功能‘上传’，然后再给它补充 步骤分为三步： 上传的实现 压缩图片的实现（手机图片越来越大，手机上传，压缩已经刻不容缓） 针对ios横屏的图片添加旋转功能（可有可没有，锦上添花的作用） 上传的实现： 我所有的接口请求统一用的axios，所以上传也沿用了axios。axios 我查阅资料，必须要用form表单的形式才能上传成功，所以按照网上的示例new 了一个formData，模拟form表单。（我
使用有赞Vant上传控件Uploader感悟
qq_37859157的博客
09-07 1万+
1.前记 因为项目是公众号网页项目，公司前端推荐使用有赞Vant组件库，这让之前都是自己撸js，css的我仿佛打开了新世界的大门，废话不多说，上正文。 照着官方文档，我很快上手撸出了界面。 <van-uploader v-model="fileList" multiple :max-count="4"/> 因为需求说明最多只能上传4张图片，故使用了max-count来定义...
Vue2 | Vant uploader实现上传文件和图片
Igiveufireworks的博客
09-12 1万+
需求：实现图片和文件的上传，单个图片超过1M则压缩，全部文件加起来不得超过10M。
解决element-ui和 vant两个组件库上传组件，上传图片后无法显示图片的问题
haogemr的博客
07-12 2401
组件库上传图片显示问题
vue3使用van-uploader上传图片显示上传中.
hunantai的博客
09-27 942
van-uploader组件默认没有提示，选择图片后直接显示在页面上，对于用户来说感知不到图片上传的进度和过程，如果上传失败用户也无法感知。无论上传成功与否都将status设置为空，取消上传提示文字。解决：给files中添加status和message属性。上传图片提示用户图片正在上传中，请稍后。打印上传的文件files查看属性。
vant 组件库中的 图片上传组件（多张图片上传，删除图片传自定义参数）
m0_58959716的博客
09-14 4921
图片上传前，限制图片格式。图片上传后，上传七牛云接口返回图片url，赋值给图片路径变量。图片删除坑：vant上传组建中内置的删除事件，默认携带两个参数，file和detail，detail中包括name和index字段。想要携带自定义参数，绑定事件时候用箭头函数：before-delete = " (file,detail) => {delImg (自定义参数)}"
van-uploader上传图片
weixin_44860425的博客
05-14 4302
<view class="fileBox"> <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" deletable="{{ true }}" bind:delete="deleteImage" name="images" max-count="3"/> </view> data:{ fileList: [], photoUrl:[] } .
【自用笔记】小程序 van-uploader 压缩图片
Lin_javascript的博客
11-28 1429
我使用的是van-uploader组件进行上传的，所以我们可以在before-read事件中进行处理，那么，我的 .wxml的代码如下（去除了不相关部分，仅余压缩相关内容）主要是用到canvas进行压缩，参考地方找不到了，如果找到，会修改添加。可能存在一定的问题，如果有坑，请留言，我们一起讨论进步！.js中代码如下（仅余压缩相关内容，其他部分已去除）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值