2021-09-06笔记：微信小程序，云开发，表单提交文本和图片

问题

想要实现的界面。
其中图片上传很麻烦，源于图片需要可以预览和删除，我用一个另外的函数实现。
在表单提交的函数中要提交临时路径下的图片，并记录返回的fileID，并和文本内容一起上传数据库

函数代码实现

记录主要函数

//表单提交至数据库
//参考文章https://www.jianshu.com/p/1365c4556c32?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
btnSub(res){
  var that = this;
  var filelist = that.data.fileList;//fileList储存临时地址
  let timestamp = (new Date()).valueOf();//用于命名cloudpath
  var date=new Date();//用于获取时间
  var now=date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+" "+date.getHours()+":"+date.getMinutes();    //得到此时的时间
  var content=res.detail.value.content;//将编辑框的内容存在content中
  var i=0//用于for循环
  for(;i<filelist.length;i++){
    var image_fileID=that.data.image_fileID//定义局部image_fileID接收数据
    var filePath=filelist[i].url//filePath为缓存图片存在的地址
    var cloudPath=timestamp + '.png'//cloudPath为图片在数据库的名字或地址，以时间戳为地址
    console.log(filePath)
    console.log(cloudPath)
    wx.cloud.uploadFile({
      cloudPath,//上传至云端的路径
      filePath,//小程序临时文件地址
      success: res => {//返回文件ID res.fileID
        console.log('[上传文件] 成功：', res)
        console.log(res.fileID)
        image_fileID.push(res.fileID)//这是局部image_fileID用push添加数据
        that.setData({
          image_fileID:image_fileID,//j局部image_fileID传值给全局image_fileID 
        })
        console.log('image_fileID: '+image_fileID)
        console.log('image_fileID.length: '+image_fileID.length)
        console.log('i='+i)
        console.log('filelist.length:'+filelist.length)
        if(filelist.length===image_fileID.length)//当所有图片的fileID都记录下来时执行数据库上传
        { //在里面如果定义数据会出问题，具体原因不清楚
          console.log('filelist.length:'+filelist.length)
          db.collection("speak").add({//speak为数据库集合名称
            data:{       
              time:now,                           //提交数据
              content:content,
              image_fileID:that.data.image_fileID,
           }
         }).then(res=>{
           console.log("---res")
           console.log(res)
         })
       }
       else{
         console.log("meijinqu")
        }
       },fail: e => {
         console.error('[上传文件] 失败：', e)
       }
     })  
  }
},

总结

1.要多问有经验的同学
2.代码编写要规范
3.问题的查找要精确，不然大量的无用解答会耗费很多时间