微信小程序实现上传图文贴

原文地址：

punkginger的个人博客

欢迎访问我的个人博客，若本文有问题也欢迎指正

首先看源代码
wxml:

            <view class="box"><view class="textBg"><label >标题</label></view><view class="list_a"><van-fieldmodel:value="{{title}}"placeholder="请输入标题"/></view><view class="textBg"><label>地点</label></view><view class="list_a"><van-fieldmodel:value="{{position}}"placeholder="请输入地址"/></view><view class="textBg"><label >物品描述</label></view><view class="list_a"><van-fieldmodel:value="{{content}}"placeholder="请输入丢失物品的详细描述"type="textarea"autosizeclass="content"/></view><van-toast id="van-toast" /><image wx:for="{{tempImg}}" wx:key="index" src="{{item}}" style="width:100px;height:100px"></image><van-button  round icon="plus" plain type="info"  block class="btn" bindtap="uploadImgHandle">图片或拍照</van-button><van-button round icon="success" type="primary" block class="btn" bindtap="submit">确定</van-button></view>

依旧是传统艺能使用vant weapp组件库写的，但是这里被vant的uploader组件坑了一把，本来想用那个写的，但是官方给的面向云开发的例子过于复杂且有错误（踩坑得知）遂弃用
wxss:

      /* pages/findOthers/findOthers.wxss */.list_a {width: 100%;padding: 30rpx 0;}input {margin-left: 4%;margin-right: 4%;}textarea {margin-left: 4%;margin-right: 4%;width: 94%;overflow: auto;word-break: break-all;}.textBg{margin-left:4%;margin-top:3%;margin-bottom:2%;background-color:#eee}page{height: 100%;}.btn{margin: 10rpx;}

没啥好说的，flex都没用到，呵呵
js:

        const db = wx.cloud.database()import Toast from '@vant/weapp/toast/toast';Page({data: {tempImg: [],fileIDs: [],title:"",content:"",position:"",folder:"lostpics",openid:""},onLoad(){Toast('再次点击上传图片按钮可重新上传');wx.cloud.callFunction({name:'getOpenId',success:res=>{this.setData({openid:res.result.openid})}})},uploadImgHandle: function () {wx.chooseImage({count: 9,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success:res=> {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePathsthis.setData({tempImg: tempFilePaths})}})},submit: function () {wx.showLoading({title: '提交中',})const promiseArr = []//只能一张张上传 遍历临时的图片数组for (let i = 0; i < this.data.tempImg.length;i++) {let filePath = this.data.tempImg[i]let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正则表达式，获取文件扩展名//在每次上传的时候，就往promiseArr里存一个promise，只有当所有的都返回结果时，才可以继续往下执行promiseArr.push(new Promise((reslove,reject)=>{wx.cloud.uploadFile({cloudPath:this.data.folder+'/'+this.data.openid+new Date().getTime()+'/'+Math.random()+suffix,filePath: filePath, // 文件路径}).then(res => {// get resource IDconsole.log(res.fileID)this.setData({fileIDs: this.data.fileIDs.concat(res.fileID)})reslove()}).catch(error => {console.log(error)})}))}Promise.all(promiseArr).then(res=>{db.collection('findOthers').add({data: {fileIDs: this.data.fileIDs,title:this.data.title,content:this.data.content,position:this.data.content}}).then(res => {console.log(res)wx.hideLoading()wx.showToast({title: '提交成功',})}).catch(error => {console.log(error)})})},})

云开发存储图像大概是这样一个流程：
1.选择图像获得临时地址（时间到则失效）
2.将图像的临时地址和一个云端的唯一的地址绑定并上传到云端，这里我用的是用户的openid+当前时间戳创建新路径，之后在当前路径下用随机数作为地址，确保唯一
3.上传成功后云端返回一个fileID
注意点大概是微信云开发中对于图像的处理是以你成功存储后返回的fileID为准的

我之前写的一个版本是点击“图片或拍照”按钮就直接把图片上传到云端了，想了想这是个bug，因为用户可能会上传错误的图片。
我没有写删除图片相关内容，因为再次选择图片上传会直接覆盖前一次选择的图片，毕竟我们在前端看到的图片是图片的临时地址，而不是最终储存在云数据库里的地址，因此在界面加载时加入了一个如何重新上传图片的提示。
然后因为小程序上传图片是一个异步过程，你无法确定什么时候9张图片才能都上传成功，只有当所有图片都上传成功之后，你才能取到所有的fileID，所以每次执行上传图片操作时，都为其构建一个Promise对象，当所有的Promise都执行成功之后，这时候再插入字段到数据库中，需要用到Promise.all()方法

效果预览

（黑色高级书包
数据库内

想了想后面还有很多想实现的功能很难，比如搜索功能。接下来还有每个帖子的内容啥的要写写，但是基本上已经完成了80%了，但是2月前完成的目标确实是落空了，，，
希望能有人指导我/帮我写，今天写js又很痛苦地大改了四种写法，每种100行左右的那种，js真难啊

微信小程序实现上传图文贴相关推荐

上传声音微信小程序_SpringBoot开发案例之微信小程序录音上传
前言书接上回的<SpringBoot开发案例之微信小程序文件上传>,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原 ...
微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
微信小程序：上传的图片显示旋转问题
问题? 开发中遇到微信小程序在上传照片后,会有一定概率旋转,查阅了资料之后,发现是和图片中携带的exif信息中的orientation这个参数有关. 小程序的页面实用webview渲染的,webvie ...
微信小程序头像上传(一)
记录一下自己实现微信小程序头像上传的过程. wxml部分( 用了vant组件库 ): <view class="info"><van-imageroundwidt ...
微信小程序视频上传组件直接上传至阿里云OSS
一.微信小程序视频上传组件示例多视频上传功能,直传OSS,可以直接从OSS删除:组织接受以逗号分隔的视频url地址,自动列出多个视频,但点击上传按钮上传视频后,同样返回以逗号分隔的视频url地址. ...
微信小程序实现上传视频功能（后端代码是java）
微信小程序实现上传视频功能(后端代码是java) 1.前端 wxml文件 <image bindtap="uploadVideo" length="3" ...
微信小程序录音上传功能
微信小程序录音上传录音弹窗wxml代码:  <view class="cui-record" hidden="{{isHid ...

微信小程序实现上传图文贴

微信小程序实现上传图文贴相关推荐

最新文章

热门文章