微信给了我们存储空间以及图片上传的功能，我们怎么可以轻易放过呢？

先看看界面：

二话不说，先实现界面：

！-佩奇/普利斯/普利斯。wxml-view class=' flex down ' view class=' flex down w100 '文本区域class=' input ' bind input=' textInput '占位符-style=' margin-left :20 rpx；'maxlength='500 '占位符='和大家一起分享你遇到的趣事，糗事吧value=“{ { text } }”自动对焦自动高度/text area/view view class=' btm flexSpaceBet w100发布项目' image src='././图像/图片。png ' class=' pic ' bind tap=' doUpload '/image view class=' pulishBtn ' bind tap=' pulish '发布/view /view！-wx : for=' { { IMgurl } } '-view class=' FlexCenter w100 ' wx : if=' { { IMgurl } } '！-view wx : for=' { { IMgurl } } ' class=' { { IMgurl } '。长度==1 '？imgurlclass 1 ' : imgurl。长度==2 '？imgurlclass 2 ' : imgurl。长度==3 '？imgurlclass 3 ' : ' imgurlclass 4 ' } } '-image src=' { { imgUrl } } ' class=' w100 ' mode=' aspectFit '/image！-/查看-/查看！-image class=' w100 ' src=' cloud ://丘皮胡-d1e 452.7169-丘皮胡-d1e 452/1451。gif '/image-/view wxss 3360

/* page/pulish/pulish。wxss */.输入{ font-size : 28 rpx颜色： # 666宽度： 100%;最小高度： 60 rpx高度：自动订单-半径： 10 rpxpadding: 20rpx }。fl { display : flex justice-content : flex-start；}.pic { width : 64 rpx h8 : 64 rpx左边距left: 20rpx}。w100 {宽度： 100%；}.发布项目{ margin-top : 80 rpx；高度： 80rpxborder-top: 1px实心# ea9518border-bottom: 1px实心# ea9518}。pulishBtn { width: 100rpx高度： 50 rpxcolor : # ffffont-size : 28 rpx；背景# ea9518边界半径： 0.1;文本对齐：中心；字体粗细：粗体；右边距： 20 rpx线高： 50 rpx} .h100 { height: 100rpx}。imgurlclass 2 { width : 50%；} .imgurlclass 1 { width : 100%；} .imgurlclass 3 { width : 33%；} .imgurlclass 4 { width : 24%；}接下来就是射流研究…的代码了：

我们要求发布的人必须是已登录状态，这个可以查看本地是否有用户名得知

//pages/pulish/pulish。jsvar app=GetApp()const db=wx。云。数据库()const _=db。命令；页面({ /** *页面的初始数据*/data: { text: ' '，imgUrl: ' '，count: 0 }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ this.getCount() }，onShow:函数(){让UserOpenID=wx。GetStorageync(' OpenID ')如果(！useopenid){ wx。showtoast({ title : '您还未登录，请先登录~ '，图标： ' none ' })setTimeout(()={ wx。切换选项卡({ URL : './me/me '，}) }，1500)} else { console。log(useopenid)} }，getCount:函数(){ //已输入的字数定义变量这个db . collection(' funny ').计数({成功： RES={那。setdata({ count : Number(RES . total)1 })})})，textInput:函数{这个。setdata({ text : e . detail。value })}，pulish:函数(){ var data={ image : new Array(app。全球数据。fileid)，//将图片储存为数组类型content: this.data.text，//用户输入的文字comment: []，userId : wx。getstorageync(' userId ')，用户名： wx。getstorageync('用户名')，//用户名身份证号：(这个。数据。计数)1，//是现在数据库的条数1,微信小程序的不知道怎么设置自增的数字字段shareNum: 0，commentNum: 0，validStatus: 0，validatime : 0 }//validastatus 3360审核状态，通过时候1, 反对时候-1 //validTime:审核次数，最多5次，如果反对的人大于等于3,则不通过控制台。日志(数据)if(数据。内容){ db。收藏(滑稽的).添加({ data:数据，success : RES={ wx。显示吐司({ title : ')发布成功，})setTimeout(()={ wx。切换选项卡({ URL : './index/index '，}) }，1000) }，fail : e={ wx。showtoast({ title : '发布错误，})控制台。log(e)} })} else { wx。showtoast({ title : '请填写文字，icon: 'none' }) } }，//上传图片//上传的时候，我们可以获得一个fileId，这个编号我们必须存起来，在别人查看的时候，图像的科学研究委员会使用的就是fileId，然后用户必//须得知道上传的是哪张图片呀，所以我们使用的是本地的图片路径来展示，即imagePath doUpload:函数(){ //选择图片变量=这个；wx.chooseImage({ count: 1，sizeType: ['compressed']，sourceType: ['album '，' camera']，success : function(RES){ wx。showloading({ title : '上传中，})const file path=RES . tempfile path[0]该。setdata({ imgurl3360 Filepath })//上传图片const cloud path=那个。数据。计算文件路径。匹配(/).[^.] ?$/)[0] //改写： 数组多图片//const文件路径=RES . tempfile路径，cloud路径=[]；//filePath.forEach((item，I)={//云路径。推(那个。数据。计数' _ ' I文件路径[I].匹配(/。[^.] ?$/)[0])//})控制台。日志(云路径)//文件路径。foreach((item，I)={ wx。云。uploadfile({云路径，文件路径，成功： RES={控制台。日志([上传文件]成功：'，cloudPath，RES)应用程序。全球数据。fileid=RES . fileid app。全球数据。云路径=云路径应用。全球数据。imagepath=文件路径}，fail : e={ console。错误([上传文件]失败：'，e) wx.showToast({ icon: 'none '，title: '上传失败，}) }，完成：()={ wx。HideLoAding()} })//})})，fail : e={ console。错误(e)} })}，/** *用户点击右上角分享*/onsharappmessage :函数(){ }})到此为止，功能就实现了。

那么，到此为止，点赞功能就基本完成了，请看详细代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。