小程序云开发如何实现图片上传及发表文字

<!--pages/pulish/pulish.wxml--><view class='flexDownC'> <view class='flexDownC w100'>  <textarea class='input' bindinput='textInput' placeholder-style='margin-left:20rpx;' maxlength='500' placeholder='和大家一起分享你遇到的趣事,糗事吧' value='{{text}}' auto-focus auto-height></textarea> </view> <view class='btm flexSpaceBet w100 publishItem'> <image src='../../images/pic.png' class='pic' bindtap='doUpload'></image> <view class='pulishBtn' bindtap='pulish'> 发布</view>  </view> <!-- wx:for='{{imgUrl}}' --> <view class='flexCenter w100' wx:if='{{imgUrl}}'> <!-- <view wx:for='{{imgUrl}}' class='{{imgUrl.length == 1? "imgUrlClass1": imgUrl.length == 2? "imgUrlClass2": imgUrl.length == 3? "imgUrlClass3": "imgUrlClass4"}}' > -->  <image src='{{imgUrl}}' class='w100' mode="aspectFit" ></image> <!-- </view> -->  </view> <!-- <image class='w100' src='cloud://qiupihu-d1e452.7169-qiupihu-d1e452/1451.gif'></image> --></view>

/* 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%;}

// pages/pulish/pulish.jsvar 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 () { }})