前言

最近在写一个小项目，由于自己的服务器已经部署了好多东西了，担心性能不够，就在这个小项目中采用了微信小程序的云开发服务。
其中有一个论坛模块，用户可以发表文字内容和图片，这篇博客就主要讲一下，如何采用微信小程序自带的云开发服务，存储用户的上传的文字内容和图片。

效果预览

做出来的gif画质有点渣，但是效果还是可以看出来的！

实现思路

1、云开发配置
（1）首先在云开发中创建一个集合，我的名字叫“posts”
（2）posts创建成功，用来存放用户发表的帖子数据
（3）点击右边的“权限设置”
（4）选择第一项：所有用户可读，仅创建者可写

2、开发论坛页面
（1）然后在微信开发工具里面创建两个page，我一个命名为bbs（论坛页面），另一个命名为addpost（添加帖子页面）:

（2）编写页面样式，因为用的有其他的第三方库，所以页面和样式代码就不展示了，只展示下图片，大家可以自己设计自己的页面：


（3）js文件编写
首先看一下bbs.js，论坛页面只需要展示所有的帖子，并且要有一个跳转到addpost页面的功能，所以核心函数就两个：
第一个就是在onshow()函数里面获取到云开发数据库中所有的帖子：

/**
 * 生命周期函数--监听页面显示
 */
onShow: function () {
  var that = this;
  db.collection('posts').orderBy('time', 'desc').get({
    success: function(res) {
      that.setData({
        posts: res.data
      })
      wx.hideLoading();
    },
    fail: console.error
  })
},

第二个是跳转到addposts页面的函数，需要在bbs.js使用bindtap绑定该函数：

navAddpost:function(){
  wx.navigateTo({
    url: '../addpost/addpost',
  })
}

然后再看一下addposts.js文件，我们需要在这里获取到用户在表单中填写的内容，以及上传的图片路径，我们需要将图片存储在云开发的云存储空间里面，然后通过api将数据存储到云开发的数据库中。
首先看下图片上传的功能：点击发帖页面的加号，就会让用户选择手机中的图片，选择之后会在发帖页面进行显示，用户可以继续进行上传图片操作。
上传图片的函数如下：

addEnclosure:function(){
  var that = this;
  // 调用选择图片的api
  wx.chooseImage({
    // 意思是一次只能选择一张图片
    count: 1,
    sizeType: ['original', 'compressed'],
    // 意思时可以从相册和照相机选择图片
    sourceType: ['album', 'camera'],
    success (res) {
      // api调用成功，返回图片的临时路径
      const tempFilePaths = res.tempFilePaths
      // 定义一个数组，存放图片的临时路径
      var imgList = that.data.imgList
      imgList.push(tempFilePaths[0])
      // 将图片路径数组赋值给全局数据中的imgList，图片数量赋值给img_count
      that.setData({
        imgList: imgList,
        img_count: that.data.img_count+1
      })
    }
  })
},

接下来，就是将数据存储在云开发的数据库和云存储空间里面的操作：
submit:function(e){
// 获取当前时间作为发帖时间
var c_date = util.formatTime(new Date());
// 获取所有需要上传的图片
var pics = this.data.imgList;
// 判断用户输入的内容是否为空，如果为空提示错误，不为空则继续操作
if(e.detail.value.textDeatil.replace(" ", "").replace("n", "") == ""){

wx.showToast({
  title: '请输入内容',
  icon: 'none'
})

}else{

// 显示正在发布，及时和用户进行交互
wx.showLoading({
  title: '正在发布...',
  mask: true
})
// 获取到当前用户的openid
var openid = app.globalData.openid;
// 定义一个数组来存放云空间的文件路径
var fileList = []
// 判断用户是否上传了图片，如果有要上传的图片，则先进行上传操作，如果没有，直接进行数据库操作
if(pics.length != 0){
  // 循环上传图片
  for(var i=0; i<pics.length; i++){
    // 为了避免文件重名，用两段随机数作为文件名（不是较好的方式）
    var filename_1 = parseInt(Math.random()*1000000).toString();
    var filename_2 = parseInt(Math.random()*1000000).toString();
    // 拼接云存储文件的路径，我是按照用户的openid来分文件夹存储用户上传的图片的
    var fileID = 'cloud://打开云开发控制台，点击左上角的【存储】按钮就能看到你的前缀路径，替换中文即可/' + openid + '/' + filename_1 + "-" + filename_2 + "." + pics[i].split(".")[3]
    // 先将云存储中文件的路径存入数组中
    fileList.push(fileID)
    // 调用api，将文件上传到云存储空间中
    wx.cloud.uploadFile({
      cloudPath: openid + '/' + filename_1 + "-" + filename_2 + "." + pics[i].split(".")[3],
      filePath: pics[i], // 文件路径
      success: res => {
        if(res.statusCode==200){
          console.log("上传成功")
        }else{
          wx.showToast({
            title: '请联系客服',
            icon: 'none'
          })
        }
      },
      fail: err => {
        // handle error
        wx.showToast({
          title: '请联系客服',
          icon: 'none'
        })
      }
    })
  }
}
// 将帖子信息存入云开发数据库
db.collection('posts').add({
  // data 字段表示需新增的 JSON 数据
  data: {
    // 帖子内容
    text: e.detail.value.textDeatil,
    // 图片附件的地址
    files: fileList,
    // 发帖时间
    time: c_date,
    // 用户头像地址
    avatarUrl: app.globalData.userInfo.avatarUrl,
    // 用户昵称
    nickName: app.globalData.userInfo.nickName
  },
  success: function(res) {
    // api调用成功就关闭load
    wx.hideLoading();
    // 显示发布成功的消息
    wx.showToast({
      title: '发布成功',
      icon: 'success',
      duration: 1000
    })
    // 设置1秒后跳转到论坛页面
    setTimeout(function(){
      wx.navigateBack({
        delta: 1
      })
    }, 1000)
    
  },
  fail: console.error
})

}
}

注意事项：
（1）var fileID = 'cloud://打开云开发控制台，点击左上角的【存储】按钮就能看到你的前缀路径，替换中文即可/' + openid + '/' + filename_1 + "-" + filename_2 + "." + pics[i].split(".")[3]
如果你是和我用一样的路径的下，用户上传的图片都会存放在以用户openid命名的文件夹中，而这些文件夹在你的云存储空间的根目录
这个地方的路径是动态的，每个人是不一样的，所以你需要去看你的云存储路径前缀是什么:

小结

其实还是蛮简单的，代码中涉及到微信小程序api异步上传的地方，我都用比较简单的方式处理了，这是我自己之前想出来的方法，因为之前也不懂服务器搭建什么的，所以当时用的是云开发，而教程又比较少，所以自己想出来的一种上传方法，如果各位有更好的方法也可以留言你的想法，一起交流进步。
最近创建了一个自己的微信公众号：石头的进阶笔记，欢迎大家关注：