有更新，看我主页里最新的那个多张图片上传的

网上找代码找了大半天了，要么是格式缺胳膊少腿到处报错，要么就是单纯的bug，图片渲染层网络层报错，没有let that=this或者res=>{}异步问题，还有js函数之间传值问题，终于弄出来了。

下面是代码

Js

let title = ''let content = ''let loadding = 'lodding'let db = wx.cloud.database()let datasPage({data: {time: '',imgPreview: '',imgList: [],temFile: ''},title_input(e) {title = e.detail.valueconsole.log(title)},content_input(e) {content = e.detail.valueconsole.log(content)},chooseImage() {wx.chooseImage({count: 9,sizeType: ['compressed', 'original'],sourceType: ['album', 'camera'],success: res => {// this.uploadImg(res.tempFilePaths[0])this.setData({imgList: this.data.imgList.concat(res.tempFilePaths),temFile: res.tempFilePaths})},fail(err) {console.log("选择失败", err)}})// 将图片上传至云存储空间},uploadImg(temFile) {for (let i = 0; i < this.data.imgList.length; i++) {let m = Math.random() * 100wx.cloud.uploadFile({cloudPath: ('imgList/帖子/' + m + '.png'), // 指定要上传的文件的小程序临时文件路径filePath: this.data.temFile[i],success: res => { // 成功回调console.log('上传成功', res)},fail(err) {console.log("失败", err)}})}},preview(e) { //预览图片let img = e.currentTarget.dataset.src;let imgList = this.data.imgList;imgList.push(img);wx.previewImage({current: img, // 当前显示图片的http链接urls: imgList // 需要预览的图片http链接列表})},delImg(e) { //删除图片let that = this;console.log('点击删除图片===>', e);let index = e.currentTarget.dataset.index;let imgList = that.data.imgList;wx.showModal({title: '提示',content: '删除该图片？',confirmColor: 'red',success(res) {if (res.confirm) {console.log('用户点击确定')imgList.splice(index, 1);that.setData({imgList})} else if (res.cancel) {console.log('用户点击取消')}}})},// 删除选中的图片deleteImg: function () {const {imgPreview} = this.datathis.setData({imgPreview: ''})},fabu() {this.uploadImg(this.data.temFile)var date = new Date();var Y = date.getFullYear();var M = date.getMonth() + 1;var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();var H = date.getHours()var min = date.getMinutes()this.setData({time: Y + "-" + M + "-" + D + " " + H + ":" + min})console.log("标题：", title)console.log("内容", content)if (title && content) {console.log("可以发布")let account = wx.getStorageSync('account')let myname = account.namewx.cloud.database().collection('users').add({data: {title: title,content: content,shenhe: 'loadding',comments: [],name: myname,time: this.data.time},}).then(res => {console.log("提交成功")wx.showToast({icon: 'none',title: '发布成功',})wx.navigateBack({delta: 1,})}).catch(res => {console.log("提交失败")})} else {wx.showToast({icon: 'none',title: '标题或者内容为空',})}},

Wxml

<view class="fabu" bindtap="fabu">发布</view>
<input class="title_input" bindinput="title_input" placeholder="请输入标题"></input>
<textarea class="content_input" bindinput="content_input" placeholder="请输入内容"></textarea><view class="img_box"><view class="img_item" wx:for="{{imgList}}" wx:for-item="item" wx:key="index"><image bindtap="preview" data-src="{{item}}" class="img_item_i" src="{{item}}" mode="aspectFill"></image><image bindtap="delImg" data-index="{{index}}" src="cloud://cloud1-7gfw6o20cdf4eb25.636c-cloud1-7gfw6o20cdf4eb25-1309094986/images/icons/取消-.jpg" class="closeImv"></image></view><view wx:if="{{imgList.length<9}}" style="justify-content: center;align-items: center;font-size: 180rpx;color:#c0ccda ;text-align: center; vertical-align: center;display: flex;border: 1px solid #c0ccda;width: 210rpx;height: 210rpx;position: relative;line-height: 210rpx; " bindtap="chooseImage">+</view>
</view>

Wxss

.fabu{display:flex ;float: right;margin-right: 10rpx;color:  #A9A9A9;font-size:40rpx;
}
.title_input{width: 100%;border-bottom: 1px solid   #DCDCDC;margin: 30rpx;}
.content_input{margin: 30rpx;}.img_box{display: flex;flex-wrap: wrap;margin: 20rpx;width: 100%;
}
.img_item_i{display: block;width: 100%;height: 100%;
}.img_item {width: 210rpx;height: 210rpx;position: relative;margin-right: 2%;margin-bottom: 2%;border: 1px solid #c0ccda;
}.closeImv {position: absolute;right: 0rpx;top: 0rpx;width: 50rpx;height: 50rpx;
}

格式不太好看，各位多担待啦，上传图片那一节代码获取了随机数作为上传到云存储图片的名字，不然会重复的，为了省事，就不去想怎么获取图片名称了，上传成功都有回调的图片地址，显示的时候调用就好啦。

下面为参考文章

https://blog.csdn.net/AIB_Kasic/article/details/107324233?utm_source=app&app_version=5.3.1&code=app_1562916241&uLinkId=usr1mkqgl919blen

下面这个是顶部导航栏样式，有点问题，那个container样式名字必须要改，什么都行，就是不能是这个，不然滚动的上下两端都有空白，而且划动还会断掉，也不知道什么原理。。

https://blog.csdn.net/wy313622821/article/details/108961445?utm_source=app&app_version=5.3.1&code=app_1562916241&uLinkId=usr1mkqgl919blen

关于微信小程序发布文章带图片的功能相关推荐

[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
《微信小程序案例12》图片识别功能
一.实现效果二.查看百度AI开发平台文档该功能是直接使用百度AI开发平台的动物识别接口,这个接口有两个重要的参数,一是需要获取access_token.二是需要把上传的图片编码为base64.而获 ...
微信小程序发布视频带封面图标题
<view style="padding: 40rpx;"><view class="userflex"><view class= ...
微信小程序实现双指缩放图片功能
前言本文分析怎么在微信小程序实现双指缩放图片的功能. 实现过程 1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析: <!--index.w ...
小程序发布上线流程_微信小程序发布流程：公司、个人如何注册小程序
如今制作微信小程序已经是非常简单的事了,即使是完全不懂技术的小白,也能利用小程序制作工具快速生成小程序,基本上选一个模板就能快速把页面搭建好. 不过,虽然小程序页面搭建很简单,但还有不少人不知道页面搭 ...
微信小程序导航条配置图片背景
文章目录微信小程序导航条配置图片背景全部页面替换就首页特殊,其他页面纯色导航条(沿用微信那套) 相关代码如果你觉得写的不错或者帮到你了,记得给我点个赞哟~ 微信小程序导航条配置图片背景需要实 ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...

关于微信小程序发布文章带图片的功能

Js

关于微信小程序发布文章带图片的功能相关推荐

最新文章

热门文章