新手：云开发上传图片到云储存且返回链接，添加到集合

水深不语，人稳不言。做人谨言慎行，智者先思而言，愚者先言而后思

学习云开发的时候看关于图片上传云储存的教程，但是想在用户选择图片之后点击提交将云储存之后，在返回链接给集合。这样的话 我们下版本云开发也许就可以制作用户发帖功能，同时考虑到免费版本只支持10个云函数，在一个云函数中做判断执行不同的操作

基于codezen提供的导图

建立界面

建立一个带输入框，选择图片，提交按钮等页面

代码

<!--pages/add/add.wxml-->
<form action="" bindsubmit="ruiBtn">
​  <input type="text" name="title" />
  <button type="warn" bindtap="ruiImg">提交图片</button>
  <button type="primary" form-type="submit">提交</button>
</form>
<image src="{{ images }}"></image>

执行事件

提交图片按钮点击之后我们执行ruiImg函数将从媒体库中选择图片上传，将地址保存data中，当我们点击提交按钮之后判断是否有图片，

如果有图片将图片提交云储存 拿到图片地址之后执行数据提交将标题和图片地址一起存集合，若没有图片将标题直接存集合；云函数可以使用type参数去执行不同操作

代码

​// pages/add/add.js
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    images: [],
    titles:''
  },
​
  // 提交按钮点击
  ruiBtn(e) {
    this.setData({
      titles:e.detail.value
    })
    // 判断是否有图片
    // 通过参数中的type判断在运行函数执行不同的操作
    // 如果有图片将图片提交云储存 拿到图片地址之后执行数据提交将标题和图片地址一起存集合
    // 若没有图片将标题直接存集合
    if (this.data.images != '') {
      wx.cloud.callFunction({
        name: 'getVersions',
        data: {
          type: 'images',
          images: this.data.images
        },
        success: res => {
          console.log(e.detail.value.title)
          console.log(res.result.fileID)
          wx.cloud.callFunction({
            name:'getVersions',
            data:{
              type:'add',
              title:this.data.titles.title,
              images:res.result.fileID
            },
            success:res2 =>{
              console.log(res2)
            }
          })
        }
      })
    } else {
      wx.cloud.callFunction({
        name: 'getVersions',
        data: {
          type: 'add',
          title: e.detail.value.title
        },
        success: res => {
          console.log(res)
        }
      })
    }
  },
  // 提交图片
  ruiImg() {
    wx.chooseMedia({
      count: 1,
      mediaType: ['mix'],
      sourceType: ['album', 'camera'],
      success: res => {
        console.log(res)
        this.setData({
          images: res.tempFiles[0].tempFilePath
        })
      }
    })
  }
})

云函数

我们建立一个云函数名字取名为“getVersions”

代码

// 云函数入口文件
const cloud = require('wx-server-sdk')
​
cloud.init({
    //env:cloud.DYNAMIC_CURRENT_ENV 默认值的时候使用第一个云开发环境
    env: 'fengrui-1gevmgfza8786ec0'
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
    console.log(event)
    // 通过type值判断执行不同的云函数
    if (event.type == 'add') {
        return db.collection('todoos').add({
            data: {
                title: event.title,
                images: event.images
            }
        })
    } else if (event.type == 'images'){
        return await cloud.uploadFile({
            //名字后面可以使用时间戳，这里测试就写固定的名字
            cloudPath: 'demo.jpg',
            fileContent: event.images,
          })
    }
}

集合

这样我们在集合中可以有标题和图片路径