微信小程序上传图片到云储存

这是wxml，用了Vant组件库

<van-cell title="商品图片" size="large"><van-uploaderfile-list="{{ fileList }}"max-count="5"bind:after-read="afterRead"bind:delete="delete"/>
</van-cell><van-button color="#7232dd" size="large" bind:click="onUpCloud">发布</van-button>

file-list="{{ fileList }}"图片暂存在js的data的fileList里

max-count="5"最多上传5个图片

bind:after-read="afterRead"添加图片方法

bind:delete="delete"删除图片方法

bind:click="onUpCloud 上传图片方法

接下来的内容都是js文件里的Page里的

data

data: {fileList: [], //上传图片的url暂存区fileLists: [], //fileID暂存区
},

afterRead 图片上传，这里是将图片先存放在fileList[]里

afterRead(event) {const { fileList = [] } = this.data;fileList.push({url: event.detail.file.url});this.setData({ fileList });
},

delete 图片删除

delete(event){const { fileList = [] } = this.data;fileList.splice(event.detail.index, 1)this.setData({ fileList });
},

onUpCloud 上传到云储存

onUpCloud(){for(let i=0; i<this.data.fileList.length; i++){ //获取图片个数wx.cloud.uploadFile({ //调用wx.cloud.uploadFilecloudPath:new Date().getTime()+'.png', // 这么复杂就是为了名字不重复，这个是图片上传在云端的名字filePath: this.data.fileList[i].url, // 小程序临时文件路径，就是暂存在data的fileList里的东西success: res => {// 返回文件 IDconsole.log("上传成功",res)console.log(res.fileID)//存入图片路径，方便以后调用这个图片const { fileLists = [] } = this.data;fileLists.push({url: res.fileID});this.setData({ fileLists });console.log(this.data.fileLists)if(i==this.data.fileList.length-1){ //循环到最后一起上传this.onUpLoad() //调用onUpLoad方法}},fail: console.error})}
},

onUpLoad 将fileLists上传到数据库，fileList里是fileID，需要读取照片的时候读取这个数据库的表里的fileLists就可以了

onUpLoad(){wx.cloud.database().collection('goods') //找到表，我这里表名是goods.add({ //add添加插入操作data:{ //准备好要插入的数据，这里就是filesLists了fileLists: this.data.fileLists,}}).then(res=>{ //如果成功就。。。console.log('添加成功',res) //就把东西添加进入setTimeout(()=>{this.setData({ //上传fileLists:[],})},2000)}).catch(res=>{ //如果失败console.log('添加失败',res)Toast.fail('发布失败');})},
});

执行顺序应该是先把图片上传到云储存，获取fileID，再把fileID上传到数据库，但是不知道为啥我这个顺序是错的，数据库总是抢先一步，这样的话就是还没获得fileID就上传数据库，这时数据库里fileLists的内容就是空的。不知道该咋解决，于是乎我给数据库的上传里加了个setTimeout。我这个方法是不对的，虽然能运行，但是说不过去，这投机倒把的方法，要是哪天网特别卡的时候就会出错了应该，你有啥好方法吗，分享分享。

为啥要把fileID存到数据库呢，没有这一步那图片不照样已经存在了云储存了吗，是因为，如果下一次需要用这个图片的时候，需要用到这个图片的url，也就是fileID，如果不给这玩意存到数据库，下次想用上传好的照片就不好找了（应该是这样的，如果说的不对，欢迎来喷我）

微信小程序上传图片到云储存相关推荐

php qcloud sdk weapp_微信小程序腾讯云php后台解决方案
微信小程序腾讯云php后台解决方案微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)conf ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片到七牛云
七牛云上传图片第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...
【中级】微信小程序 - 腾讯云 - wafer2 - PHP - DEMO - 003 - 源码分析 - 01 - 文件组成详细分析
1 前言: 本文原创,欢迎转载,但是,务必保持原文并且给出原文链接. 微信小程序 - 腾讯云 - PHP - DEMO 是微信提供的一个微信小程序和腾讯云小程序云服务wafer 进行接口的例子. 本仓 ...
微信小程序使用阿里云物联网API开发物联网应用
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...
微信小程序：uni-app云开发的网盘助手
这是一款uni-app开发的一款网盘小助手小程序源码该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容另外呢该小程序还可以免费领取百度网盘七天会员,所以用来引流特别的不错该小程序还有外卖系 ...
【微信小程序开发（云壁纸小程序教程）】
微信小程序开发(云壁纸小程序教程) 1. 准备 HBuilder X 和微信开发者工具 2. 进入网站注册小程序 3. 点击发行,这时候就用到微信开发者工具 1. 准备 HBuilder X 和微 ...
微信小程序开发13 云开发：云原生一体化应用开发平台
你好,我是冠宇,从这个模块开始,就由我带着你一起学习. 在开篇词中,俊鹏讲到云开发诞生的背后动力是困扰前端开发者们的一个核心问题:对后端的依赖.那云开发到底怎么去优化和解决这个问题的呢? 这就是我们今 ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序自动化构建(云效)
文章目录前言一.miniprogram-ci 二.将appid和privateKey配置成云效参数 1.修改上传时的脚本 2.修改manifest.json中的appid 3.修改云效配置总结 ...

微信小程序上传图片到云储存

微信小程序上传图片到云储存相关推荐

最新文章

热门文章