0基础——微信小程序上传图片到云开发存储中，并将http地址存储到云开发的数据库中新建一个小程序项目，我选的不使用云开发（自己之后加相关云开发的配置）相关配置页面截图

150 阅读 0 评论 99 点赞

我是靠谱客的博主微笑翅膀，这篇文章主要介绍0基础——微信小程序上传图片到云开发存储中，并将http地址存储到云开发的数据库中新建一个小程序项目，我选的不使用云开发（自己之后加相关云开发的配置）相关配置页面截图，现在分享给大家，希望可以做个参考。

上传实现预览功能请点击这里

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

在这里插入图片描述

相关配置

app.js配置初始化

复制代码

1
2
3
4
5
6
7
8
9
10
// app.js
App({
  onLaunch() {
    wx.cloud.init({
      env: "自己的env"
    })
  }
})

获取自己的env
在这里插入图片描述

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

在这里插入图片描述

wxml页面

复制代码

1
2
3
4
5
6
7
8
<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
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// 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
    })
  }
})