小程序云开发如何上传图片和发布文字
更新时间:2019年5月17日 11:47:04 作者:JohnnyLiao_WJ
本文主要为您详细介绍小程序云开发教程,如何上传图片和发布文字,具有一定的参考价值。 感兴趣的男伙伴可以参考一下
陌陌给了我们存储空间和上传图片的功能,我们怎么能轻易放手呢?
先看一下界面:
别的不说,先实现接口:
发布
wxss:
/* pages/pulish/pulish.wxss */ .input{ font-size: 28rpx; color: #666; width: 100%; min-height: 60rpx; height: auto; border-radius: 10rpx; padding: 20rpx; } .fl{ display: flex; justify-content: flex-start; } .pic{ width: 64rpx; height: 64rpx; margin-left: 20rpx; } .w100{ width: 100%; } .publishItem{ margin-top: 80rpx; height: 80rpx; border-top: 1px solid #ea9518; border-bottom: 1px solid #ea9518; } .pulishBtn{ width: 100rpx; height: 50rpx; color: #fff; font-size: 28rpx; background: #ea9518; border-radius: 0.1; text-align: center; font-weight: bold; margin-right: 20rpx; line-height: 50rpx; } .h100{ height: 100rpx; } .imgUrlClass2{ width: 50%; } .imgUrlClass1{ width: 100%; } .imgUrlClass3{ width: 33%; } .imgUrlClass4{ width: 24%; }
然后是js代码:
我们要求发布的人必须是登录的。这个可以检查一下本地是否有用户名。
// pages/pulish/pulish.js var app = getApp() const db = wx.cloud.database() const _ = db.command; Page({ /** * 页面的初始数据 */ data: { text: '', imgUrl: '', count: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getCount() }, onShow: function(){ let userOpenId = wx.getStorageSync('openId') if (!userOpenId) { wx.showToast({ title: '您还未登录,请先登录~', icon: 'none' }) setTimeout(() => { wx.switchTab({ url: '../me/me', }) }, 1500) } else { console.log(userOpenId) } }, getCount: function(){ //已输入的字数 var that = this db.collection('funnys').count({ success: res => { that.setData({ count: Number(res.total) + 1 }) } }) }, textInput: function(e){ this.setData({ text: e.detail.value }) }, pulish: function(){ var data = { image: new Array(app.globalData.fileID), //将图片储存为数组类型 content: this.data.text, //用户输入的文字 comment: [], userId: wx.getStorageSync('userId'), username: wx.getStorageSync('username'), //用户名 id: Number(this.data.count) +1, //是现在数据库的条数+1,微信小程序的不知道怎么设置自增的数字字段 shareNum: 0, commentNum: 0, validStatus: 0, validTime: 0 } //validStatus: 审核状态, 通过时候 +1, 反对时候-1 //validTime: 审核次数, 最多5次,如果反对的人大于等于3,则不通过 console.log(data) if (data.content){ db.collection('funnys').add({ data: data, success:res => { wx.showToast({ title: '发布成功', }) setTimeout(()=>{ wx.switchTab({ url: '../index/index', }) }, 1000) }, fail: e=>{ wx.showToast({ title: '发布错误', }) console.log(e) } }) }else{ wx.showToast({ title: '请填写文字', icon: 'none' }) } }, // 上传图片 //上传的时候,我们可以获得一个fileId,这个id我们必须存起来,在别人查看的时候,image的src使用的就是fileId,然后用户必 //须得知道上传的是哪张图片呀, 所以我们使用的是本地的图片路径来展示,即imagePath doUpload: function () { // 选择图片 var that = this; wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: function (res) { wx.showLoading({ title: '上传中', }) const filePath = res.tempFilePaths[0] that.setData({ imgUrl: filePath }) // 上传图片 const cloudPath = that.data.count + filePath.match(/.[^.]+?$/)[0] //改写: 数组 多图片 // const filePath = res.tempFilePaths, cloudPath = []; // filePath.forEach((item, i)=>{ // cloudPath.push(that.data.count + '_' + i + filePath[i].match(/.[^.]+?$/)[0]) // }) console.log(cloudPath) // filePath.forEach((item, i) => { wx.cloud.uploadFile({ cloudPath, filePath, success: res => { console.log('[上传文件] 成功:', cloudPath, res) app.globalData.fileID = res.fileID app.globalData.cloudPath = cloudPath app.globalData.imagePath = filePath }, fail: e => { console.error('[上传文件] 失败:', e) wx.showToast({ icon: 'none', title: '上传失败', }) }, complete: () => { wx.hideLoading() } }) // }) }, fail: e => { console.error(e) } }) }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
至此,该功能已经实现。
至此,like功能基本完成图片上传到网站小程序是图片上传到网站小程序是,请看详细代码
以上就是本文的全部内容。 希望对您的学习有所帮助,也希望您多多支持脚本之家。