0基础——微信小程序上传图片到云开发存储中，并将http地址存储到云开发的数据库中

新建一个小程序项目，我选的不使用云开发（自己之后加相关云开发的配置）

相关配置

app.js配置初始化

// app.js
App({
     
  onLaunch() {
     
    wx.cloud.init({
     
      env: "自己的env"
    })
  }
})

获取自己的env

云开发新建一个数据库列表

wxml页面

<input placeholder="输入姓名" bindinput="addName">input>
<input placeholder="输入性别" bindinput="addSex">input>

<button bindtap="getData">查询button>
<button bindtap="addData">增加button>

<button bindtap="upload">上传图片button>

js页面

// index.js
// 获取应用实例
const DB = wx.cloud.database().collection("list")
let name = ""
let sex = ""
let url = ""

Page({
     
  getData() {
     
    DB.get({
     
      success(res) {
     
        console.log(res)
      }
    })
  },
  // 获取输入框中的姓名
  addName(event) {
     
    console.log(event.detail.value)
    name = event.detail.value
  },
  // 获取输入框中的性别
  addSex(event) {
     
    console.log(event.detail.value)
    sex = event.detail.value
  },
  // 获取图片上传后的url路径
  addImagePath(fileId) {
     
    console.log(fileId)
    wx.cloud.getTempFileURL({
     
      fileList: [fileId],
      success: res => {
     
        url = res.fileList[0].tempFileURL
      },
      fail: console.error
    })
  },
  addData() {
     
    DB.add({
     
      data: {
     
        name: name,
        sex : sex,
        url: url
      },
      success(res) {
     
        console.log("添加成功", res)
      },
      fail() {
     
        console.log("添加失败", res)
      }
    })
  },
  //上传文件
  upload(){
     
    let that = this;
    wx.chooseImage({
     
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
     
        console.log("成功",res);
        that.uploadImage(res.tempFilePaths[0]);
      }
    })
  },
  // 上传到云开发的存储中
  uploadImage(fileURL) {
     
    var that = this
    wx.cloud.uploadFile({
     
      cloudPath:new Date().getTime()+'.png', // 上传至云端的路径
      filePath: fileURL, // 小程序临时文件路径
      success: res => {
     
        //获取图片的http路径
        that.addImagePath(res.fileID)
      },
      fail: console.error
    })
  }
})

页面截图

添加页面

添加成功