小程序结合Vant Weapp实现多张图片的上传和预览

前言：

不太懂为啥Vant Weapp的官方文档明明可以写全代码，却只放了一部分出来，关于云开发的案例也是写得蛮晦涩难懂的，参考了以下的文档：
云开发能力基础讲解
小程序官方文档wx.cloud.uploadFile
vant Weapp官方文档Uploader 文件上传

参考了这位博主的文章
微信小程序云开发图片上传实现预览（配合vant Weapp使用）

实现效果预览：

上传成功前显示图片正在加载，上传成功才显示图片

WXML代码：

<view class="image-uploader"><!-- 文件上传 --><van-uploader file-list="{{ fileList }}"deletable="{{ true }}" use-before-readbind:before-read="beforeRead"bind:after-read="afterRead" bind:delete="deleteImg"/>
</view>

before-read：文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为true
after-read：文件读取完成后（不用使用wx.chooseImage，event.detail.file就是当前读取的文件

JS代码：

Page({data: {fileList: [],},//before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。beforeRead(event) {const { file, callback } = event.detail;callback( file.type === 'image' );},afterRead( event) {const file = event.detail.file //还没上传时将选择的图片的上传状态设置为加载    var that = thisconst fileList = that.data.fileList fileList.push({})fileList[ fileList.length-1 ].status='uploading'that.setData({ fileList })this.uploadImg( file.url )},// 上传图片到云开发的存储中uploadImg( fileURL) {var that = this//上传文件const filePath = fileURL // 小程序临时文件路径const cloudPath = `${Date.now()}-${Math.floor(Math.random(0, 1) * 1000)}` + filePath.match(/\.[^.]+?$/)[0]// 给文件名加上时间戳和一个随机数，时间戳是以毫秒计算，而随机数是以 1000 内的正整数，除非 1 秒钟（1 秒=1000 毫秒）上传几十万张照片，不然文件名是不会重复的。// 将图片上传至云存储空间wx.cloud.uploadFile({cloudPath, // 指定上传到的云路径filePath // 指定要上传的文件的小程序临时文件路径}).then(res => {// 上传一张图片就会打印上传成功之后的 res 对象，里面包含图片在云存储里的 fileID，注意它的文件名和文件后缀console.log("res.fileID", res.fileID)// 上传完成需要更新 fileListconst fileList = that.data.fileList fileList[ fileList.length-1 ].url = res.fileIDfileList[ fileList.length-1 ].status='done' //将上传状态修改为已完成that.setData({ fileList })console.log("fileList", fileList)wx.showToast({ title: '上传成功', icon: 'none' })}).catch((e) => {wx.showToast({ title: '上传失败', icon: 'none' })const fileList = that.data.fileList fileList[ fileList.length-1 ].status='failed' //将上传状态修改为已完成that.setData({ fileList })console.log(e)});},// 点击预览的x号，将图片删除deleteImg( event) {// event.detail.index: 删除图片的序号值const delIndex = event.detail.indexconst fileList = that.data.fileList // 云存储删除（真删除）var fileID = fileList[ delIndex].urlthis.deleteCloudImg( fileID)// 页面删除（假删除）// 添加或删除 array.splice(index,howmany,item1,.....,itemX)fileList.splice( delIndex, 1)this.setData({ fileList })},// 删除云存储的图片deleteCloudImg( fileID) {wx.cloud.deleteFile({fileList: [ fileID],}).then(res => {// handle successconsole.log(res.fileList)}).catch((e) => {wx.showToast({ title: '删除失败', icon: 'none' })console.log(e)})}
})

通过在数组 fileList 末尾进行添加图片信息， fileList[ fileList.length-1 ] 可以指定数组末尾，删除可以通过删除图片的序号值删除数组的信息fileList.splice( delIndex, 1)

小程序结合Vant Weapp实现多张图片的上传和预览相关推荐

vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件
微信小程序多图上传最近在写小程序的商品上传,为方便需要使用多张图片的上传的功能.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求创建了一个组件希望能够帮到大家效果图创建一个图片上传的p ...
微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序中Vant Weapp的引用与使用
微信小程序中Vant Weapp的引用与使用 1.安装方式 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @va ...
微信小程序使用vant weapp报错
微信小程序使用vant weapp报错错误一:构建错误错误二:["usingComponents"]["van-button"] 未找到我的安装流程 1. ...
微信小程序升级Vant Weapp版本
微信小程序升级Vant Weapp版本大家好,今天我们来学习一下微信小程序如何升级Vant Weapp版本,好好看,好好学,超详细的第一步首先你要有一个构建npm的项目还不知道构建npm的小伙 ...
小程序安装Vant Weapp详细步骤,下载和npm安装版
小程序安装Vant Weapp详细步骤使用npm下载 1.新建项目并初始化项目 2.下载Vant Weapp 3.修改 app.json 4.构建 npm 包 5.引入组件下载方式 1. npm下 ...
微信小程序基于vant和springboot实现附件上传和预览
前言图片上传和预览在移动端应用非常广泛和频繁,vant组件库van-uploader组件已经帮我们实现了大部分功能,但是在系统中频繁使用还是有点麻烦,我们根据自身的业务系统重新封装了一下简化我们的开 ...
一款社区论坛小程序源码（修复登录图片发布上传问题）
简介: 这是一款社区论坛小程序源码(修复登录图片发布上传问题) 内涵强大的功能支持多种多样的发帖模式比如发图文,发语音,发涂鸦,发视频等另外也可以设置为只能会员才可以发另外还拥有礼物功能,可以 ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...

小程序结合Vant Weapp实现多张图片的上传和预览

前言：

实现效果预览：

WXML代码：

JS代码：

小程序结合Vant Weapp实现多张图片的上传和预览相关推荐

最新文章

热门文章