微信小程序之使用vant-3组件Uploader文件上传

已于 2023-09-04 23:06:30 修改
阅读量4.7k 收藏 8
点赞数 7
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序
于 2022-04-24 15:55:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ml12818/article/details/124384385
本文介绍了如何在微信小程序中整合Vant Weapp的Uploader组件，实现图片上传功能。首先，需要引入 vant 的 weapp 包到项目，并在 app.json 中配置 usingComponents。接着，通过编写 WXML 和 JS 代码来展示图片并处理文件选择和删除操作。在 JS 代码中，定义了 afterRead 和 deleteImg 方法，分别用于文件读取后的处理和删除图片。示例代码详细展示了实现过程。

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

效果图：
在这里插入图片描述

微信小程序之使用vant-3组件Uploader文件上传


测试链接

1、把vant的weapp包加进来

在这里插入图片描述

2、在app.json文件里面"usingComponents"加载进来才能使用组件

在这里插入图片描述

3、开始编写

wxml代码：

 <view class="lin-v">
                <view class="f-16 w-200">红富士</view>
                <van-uploader
                        file-list="{{ fileList }}"
                        bind:after-read="afterRead"
                        bind:delete="deleteImg"
                        max-count="3"
                        max-size="5242880"
                />
                <view class="f-12 fc-h" style="line-height: 40rpx">添加图片</view>
            </view>
<!--max-count="3":最大上传3张图片,-->

js代码：

Page({
    /**
     * 页面的初始数据
     */
    data: {
		fileList: []
	},
	//文件选择
    afterRead(event) {
        const {file} = event.detail;
        let img = {
            url: file.url,
            name: '图片1',
        }
        let fileList = this.data.fileList;
        fileList.push(img);
        this.setData({fileList: fileList});
    },
   /* 删除图片*/
    deleteImg(e) {
        let fileList = this.data.fileList;
        fileList.splice(e.detail.index, 1);
        this.setData({fileList: fileList});
    },
})

完结----------

微信小程序 vant weapp里面的上传upload组件研究
峰会路转的博客
11-04 2065
1.开发环境下，没有https域名的图片，在小程序模拟器里看不到上传的缩略图，但是官网确实可以显示的，问题不知道出现在哪里。vantweapp里面的上传组件看起来挺简单，用起来还是花了不少时间去做业务，现在记录下遇到的问题。2.删除图片不是简单写个deletable实行就可以，还要实现对应的删除方法。4.我这里没做上传前校验，可以上按照文档做。3.上传单张图片的方法与多图是有区别的。常见的功能就整理完毕了~~这样就可以同时上传多张。
微信小程序 van-uploader文件上传
yuwenwenwenwenyu的博客
02-27 1871
微信小程序van-uploader文件上传
在微信小程序中使用 Vant 的 Uploader 组件上传图片，并将图片的 Base64 数据传输到 Spring Boot 后端
qq_30262775的博客
04-10 1419
在微信小程序中使用 Vant 的 Uploader 组件来实现图片上传功能。你需要在小程序中引入 Vant 组件库，并使用 Uploader 组件来创建一个上传图片的界面。当用户选择图片后，Upoader 组件会触发一个事件，你可以在该事件中获取到图片文件，并使用小程序提供的 API 将图片转换为 Base64 格式。请根据你的实际业务需求和后端接口设计，对示例代码进行相应的修改和扩展。方法将接收到的图片数据进行处理，你可以根据实际需求进行相应的操作。，并将上传的 Base64 图片数据封装在。
微信小程序使用vant-weap的uploader组件点击无反应总结
最新发布
qq_38685242的博客
06-27 262
小程序开发中遇到上传图片功能失效问题，原因是基础库2.32.3以上版本对隐私权限进行强制校验。
【微信小程序】van-uploader实现文件上传
qq_22744093的博客
08-03 5864
wxml：deletedFile是删除文件函数，设置deletable=“{{ true }}” 和在数据中 deletable: true图片右上角会显示删除按钮，在点击删除图标时调用deletedFile函数去处理删除逻辑。beforeRead：是读之前调用函数，afterRead读取文件之后调用的文件。使用van-uploader和wx.uploadFile实现文件上传，后端使用ThinkPHP。json：引入van-uploader。配置文件cosClint.php。
Vue2 | Vant uploader实现上传文件和图片
Igiveufireworks的博客
09-12 1万+
需求：实现图片和文件的上传，单个图片超过1M则压缩，全部文件加起来不得超过10M。
Vant Uploader上传文件 + 提交按钮上传（前后端）
热门推荐
27号白开水的博客
05-30 1万+
安卓版PDA对设备故障进行报修。①在提交表单的时候需要同时提交故障照片，②图片单选。 上传组件使用了 `Vant v2.12.47` 中的 Uploader 组件，但是官方文档只是对单个组件的前端说明。最近才开始用 Vant，不太熟悉，在网上找了些使用方法，感觉零零碎碎的，而且不知道后端代码如何承接参数。在此做一下使用方面的代码总结。
微信小程序云开发---vant组件 van-uploader 实现视频文件上传到云存储，发动态功能
需要点灵感
07-07 8229
pages/upVideo.wxml //获取用户的头像和昵称展示 <view class="headerBox"> <image src="{{userInfo.weixinInfo.avatarUrl}}"></image> <text>{{userInfo.weixinInfo.nickName}}</text> </view> //填写动态相关的信息，select为自定义的下拉选择组件 <view class="
微信小程序 van-uploadedr 上传图片并压缩组件
03-15
微信小程序 图片压缩、组件、压缩文件大小数量、可配置、压缩质量可配置 <compress-uploader file-list="{{ fileList }}" max-count="6" bind:after-read="afterRead" bind:delete="deleteClick" quality="0.8" /> ...
微信小程序中使用Vant Weapp组件库
qq_60976312的博客
02-02 823
微信小程序中使用Vant Weapp组件库
微信小程序上传文件组件
weixin_45947191的博客
03-10 2458
微信小程序上传文件 一、说明 该拍照组件带有微信授权相机功能，会结合后端接口，将上传的图片以数组集合的形式传值给父级页面。 注意：组件适用于，单独上传图片，不携带参数，结合后端接口返回路径之后，再调用另外的保存接口，携带参数与图片提交的场景，请慎重使用。 支持功能 相册&相机拍照 可限制图片张数 可根据自己需求新增删除功能 可预览 缺陷 目前不支持删除 二、原理 由于wx.uploadFile一次性上传多张图片会报错，只能一张张的上传，所以封装的上传文件组件结合后端接口进行的是循环上传。废话
微信小程序封装上传文件组件
03-10
微信小程序封装上传文件组件，只适用于单独上传图片，不携带参数，结合后端接口返回路径之后，再调用另外的保存接口，携带参数与图片提交的场景，请慎重使用。
微信小程序-多图片上传组件
08-04
我们在开发微信小程序的时候，会遇到像“发布朋友圈”中多组图片上传的功能，但是微信小程序官方并没有给出这样的组件，我这里写好了一个这样的组件，并且支持通过属性自定义一些样式和文本，是自适应于父级元素块，货真价实。如果想看效果，请看我的博客《微信小程序中实现多组图片上传的组件》
【亲测免费】 微信小程序大文件上传组件：miniprogram-file-uploader快速入门与实践
gitblog_00566的博客
09-13 1771
微信小程序大文件上传组件：miniprogram-file-uploader快速入门与实践 项目介绍 miniprogram-file-uploader 是一款专为微信小程序设计的大文件上传解决方案。它突破了小程序原生文件上传接口(wx.uploadFile)的10MB大小限制，通过分块上传的方式实现了大文件的有效传输。该组件支持断点续传、进度监控、并发上传、秒传等功能，并且适应于基础库版本2....
vant-基于van-uploader封装的文件上传图片压缩组件
qq_40007317的博客
11-16 2077
vant-基于van-uploader封装的文件上传图片压缩组件
vant中uploader上传图片
weixin_42017221的博客
02-09 1182
【代码】vant中uploader上传图片。
微信小程序使用van-uploader实现图片上传、预览与删除
Jane0129的博客
10-16 2746
【代码】微信小程序使用van-uploader实现图片上传、预览与删除。
vant 上传文件
vvvvv88888的博客
09-07 3097
在做项目时我们都会碰到需要上传文件，接下来就给大家分享一个vant二次封装的上传组件。1、在components文件夹下创建imageUpload.vue文件。组件绑定返回的是以逗号隔开的字符串，如果不需要就在组件里面改就可以了。在使用时用v-model绑定就行了。（2）disabled是否禁用上传。（1）accept自定义上传格式。（3）slot自定义修改样式。在这里修改自己需要的样式。
微信小程序 之 Vant Weapp 组件 uploader文件下载与添加
10-29
Vant Weapp 是微信小程序生态下基于 Vue 框架的一个优秀组件库，它提供了一个名为 `uploader` 的组件，用于处理文件上传和下载的功能。对于文件下载，你可以通过 `download` 属性指定一个 URL 来下载远程文件。示例如下： ```html <van-uploader :url="remoteFileUrl" // 这里替换为你要下载的文件URL action="saveRemoteFile" download ></van-uploader> <script> export default { data() { return { remoteFileUrl: &#39;https://example.com/download/file.jpg&#39;, // 下载文件的地址 }; }, methods: { saveRemoteFile(response) { if (response.status === 200) { console.log(&#39;下载成功:&#39;, response.data); // 将下载好的文件保存到本地或其他地方，这里不做详细展示 } else { console.error(&#39;下载失败:&#39;, response.message); } }, }, }; </script> ``` 对于文件添加（上传），你可以使用 `before-upload` 和 `on-success` 或者直接设置 `action` 属性指向服务器端处理文件上传的地方。上传文件前通常会检查文件大小、格式等限制： ```html <van-uploader multiple :before-upload="beforeUpload" @success="uploadSuccess" action="/api/upload" ></van-uploader> <script> export default { methods: { beforeUpload(file) { // 文件检查，返回true表示允许上传，false则阻止 const allowedTypes = [&#39;image/jpeg&#39;, &#39;image/png&#39;]; if (!allowedTypes.includes(file.type)) { wx.showToast({ title: &#39;只支持图片文件&#39;, }); return false; } if (file.size > 5 * 1024 * 1024) { // 限制文件大小为5MB wx.showToast({ title: &#39;文件过大，请选择小于5MB的图片&#39;, }); return false; } return true; }, uploadSuccess(res) { console.log(&#39;文件上传成功:&#39;, res); }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值