Vant的upload图片组件：使用户上传的图片全部都显示出来（css3的object-fit属性）

最新推荐文章于 2023-04-08 10:29:29 发布

qq_38969618

最新推荐文章于 2023-04-08 10:29:29 发布

阅读量2.3k

点赞数

分类专栏： Vue实战项目Bug解决汇总

本文链接：https://blog.csdn.net/qq_38969618/article/details/104156866

版权

Vue实战项目Bug解决汇总专栏收录该内容

18 篇文章 3 订阅

订阅专栏

/* 使上传的图片自适应外层宽高,使用css3属性:object-fit */
.van-uploader__preview-image .van-image__img{
    object-fit: contain !important;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_38969618

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue -- vant van-uploader 上传图片功能

King Saj

01-09

1722

效果: 思路: 使用 van-uploader after-read事件,将选中的图片,上传服务器. 上传成功后服务器返回上传图片的地址,拿到返回的地址,进行数据绑定的相关操作代码: <van-field name="payAvg" label="缴费截图必填" > <template #input> <van-uploader

修改vant-ui的van-uploader组件在APP下也能唤起相册

ihuww的博客

05-13

3290

背景近期有个小H5项目需要接入自有APP中，这个项目中涉及多个图片上传的功能，且使用的是vant 的van-uploader，但发布到APP进行测试时发现上传组件全都没有反应，这可咋整？按vant官方的建议改APP是一种方法，但APP是外包的，改是比较费劲了。那就只能自己动手修改vant了。目标在vant 对应的组件中增加nativeHandle属性，传入APP 提供的JSAPI，使之能适配APP。方法 1、在gitee上找到vant的源码，clone 2.x分支，git clone -b

参与评论您还未登录，请先登录后发表或查看评论

vant 上传附件后回显_Vue + VantUI Uploader 上传组件，实现上传功能，但手机实时上传照片只回显，上传不上去。...

weixin_39723010的博客

12-19

1387

电脑浏览器没有任何问题手机上操作，就会出现图片上传不上去，也没有报错，怀疑是没有触发上传事件，但又不知道如何修改，求大神给个建议。。来个Demo 那就好极了这是前端页面<div v-if="page==6"><van-uploader :after-read="onRead" accept="image/*" multiple><div sty...

van-uploader上传图片

weixin_44860425的博客

05-14

4254

<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:[] } .

Vant Uploader 图片上传，根据后端url回显问题

qq_45225759的博客

06-13

1369

Vant Uploader 图片上传，根据后端url回显问题

前端上传图片、显示

weixin_42491987的博客

02-24

1032

使用: vue2, vant2 功能点： qs1: 前端上传图片并展示 an1: 上传file格式图片转为base64格式 qs2: 要将上传的图片在宽高固定的窗口里显示完整 an2: 把获取的base64的图片链接，赋值到image的src上，然后获取到图片的宽高比例；再与窗口宽高比例对比，选择以高占满还是以宽占满。 #### 具体实现： ....结构： <div class="upload"> <div class="img-box"> .

Vue+Vant 图片上传加显示的案例

01-22

vant中上传图片组件：https://youzan.github.io/vant/#/zh-CN/uploader 上传图片的组件uploader： <van after-read=onRead accept=image/*> method中 methods: { //选择图片后执行 onRead(fi

vant-image本地图片无法显示

01-07

正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图：加载失败解决办法： src属性绑定requeir（）方法 :src=require('../...

vue +vant 适合手机端上传图片图片实现了上传、压缩、旋转图片

01-20

在开发移动端应用时，Vue.js 结合 Vant UI 框架是一个常见选择，因为它们提供了高效的组件化开发能力和良好的用户体验。在这个场景中，我们讨论的是如何在Vue和Vant的环境中实现手机端图片的上传、压缩和旋转功能。...

h5使用js上传图片并回显，h5使用vant-ui上传图片并回显

Cheryl的加工厂

12-06

931

1. h5+js上传图片并回显 2. h5+js+vue.js上传图片并回显 3. h5+ vue.js+vant-ui上传图片并回显

vue使用vant的uploader上传图片到服务器

qq_37291064的博客

04-27

7658

11111111

vant van-uploader组件实现点击图片进行编辑（更换图片）

WiseGirls的博客

08-05

2323

vant van-uploader组件实现点击已上传的图片可以进行编辑（更换图片）

vue+vant Uploader base64上传图片，预览、上传、处理过（后台处理）的图片（旋转、模糊、裁剪...）

射手男很懒的博客

11-23

5162

<van-uploader v-model="uploadList" :after-read="process"/> 取上传列表中图片的数据 base64数据 //取上传列表中图片的数据 base64数据 uploadList[0].content.replace(/^data:image\/\w+;base64,/, '');

关于vant Uploader 上传的图片和文件回显重新编辑中遇到的问题

doudou15203211327的博客

08-15

4166

1、图片和文件在上传之前是base64和file格式的才能在缩略图中显示相关信息，然而上传之后图片转换成了https的网络地址的形式，即二进制数据格式（不知道说法对不对），总之是个网络地址可以直接在浏览器上显示的，文件可以直接从浏览器上下载下来。文件重新接收的时候也是https的格式不携带其他的文件信息，这个时候需要自己从https地址中剥离文件名字再显示出来下面是我实际运用中的代码this.file是上传的双向绑定的变量【】olddata.file是从后端获取的https的文件地址。......

微信小程序开发使用van-uploader上传多张图片时追加图片覆盖问题--纯前端

qq_43219902的博客

04-14

3213

微信小程序开发使用van-uploader上传多张图片时追加图片覆盖问题--纯前端1、问题：使用uploader上传图片第一次选择了几张图片后还想再打开相册选择几张图片，后面选择的图片会将之前选择图片覆盖掉。2、原因，暂时不明白，vue中的uploader与这里时一样的用法，可以正常使用，可能时小程序vant组件库的bug吧。3、解决方法4、拓展：图片预览的右上角的删除图片，设置了显示点击却没效果，也要自己手动添加效果，这个的解决方法和上面说的问题差不多，只不过这个是删除。5、总结微信小程序开发从入门到放

v-html 处理图片自适应以及点击图片预览图片（vant的组件IMagePreview）

qq_37672347的博客

01-17

4239

handleHtml($event) 利用冒泡事件实现的设置深度选择器设置 img 最大宽度100% 写的公共预览图片的方法通过import 导入写的公共预览图片的方法

vant图片上传压缩