Slog71_选取、上传和显示本地图片GET ！（微信小程序之云开发-全栈时代3）

摘要：掘金主页简书主页道常无为而无不为开发环境需要的信息和信息源小程序官方文档小程序端文档客户端云端文档服务端前言云开发封装好了一些常用的业务逻辑，提供了以下方面的相关供开发者使用云函数数据库存储管理开始编码现在先把微信开发工具更新至最新，有部

ArthurSlog

SLog-71

Year·1

Guangzhou·China

Sep 12th 2018

ArthurSlog Page

GitHub

NPM Package Page

掘金主页

简书主页

segmentfault

道常无为而无不为

小程序官方文档

小程序端API文档（客户端）

云端API文档（服务端）

”云开发“ 封装好了一些常用的业务逻辑，提供了以下方面的相关API供开发者使用：

云函数

数据库

存储管理

现在先把微信开发工具更新至最新（1.02.1809101），有部分开发人员在微信社区反馈更新之后没有看到“云开发”的按钮

解决办法：点击检查更新，等待更新完全完成之后重启开发工具

重点：云开发方式需要appid，请准备好

当前云开发模版的微信小程序文件结构如下：

</>复制代码 
cloudfunctions
    | - login
          | - index.js
          | - package.json
          | - package-lock.json
          
    | - arthurSlog_getInfo
          | - index.js
          | - package.json
          | - package-lock.json
    | - arthurSlog_methodAdd
          | - index.js
          | - package.json
          | - package-lock.json
          
miniprogram
    | - images
           | - code-db-inc-dec.png
           | - code-db-onAdd.png
           | - code-db-onQuery.png
           | - code-db-onRemove.png
           | - code-func-sum.png
           | - console-entrance.png
           | - create-collection.png
    | - pages
           | - addFunction
                    | - addFunction.js
                    | - addFunction.json
                    | - addFunction.wxml
                    | - addFunction.wxss
           | - chooseLib
                    | - chooseLib.js
                    | - chooseLib.json
                    | - chooseLib.wxml
                    | - chooseLib.wsxx
           | - databaseGuide
                    | - databaseGuide.js
                    | - databaseGuide.json
                    | - databaseGuide.wxml
                    | - databaseGuide.wxss
           | - deployFunctions
                    | - deployFunctions.js
                    | - deployFunctions.json
                    | - deployFunctions.wxml
                    | - deployFunctions.wxss
           | - index
                    | - index.js
                    | - index.wxml
                    | - index.wxss
                    | - user-unlogin.png
           | - storageConsole
                    | - storageConsole.js
                    | - storageConsole.json
                    | - storageConsole.wxml
                    | - storageConsole.wxss
           | - userConsole
                    | - userConsole.js
                    | - userConsole.json
                    | - userConsole.wxml
                    | - userConsole.wxss
    | - style
           | - guide.wxss
    | - app.js
    | - app.json
    | - app.wxss
README.md
project.config.json

在使用“云开发”的时候，需要先调用 初始化函数 init

小程序端的初始化函数是 wx.cloud.init()

云端的初始化函数是 const cloud = require("wx-server-sdk") cloud.init())

Client：
miniprogram/app.js

</>复制代码 
//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error("请使用 2.2.3 或以上的基础库以使用云能力")
    } else {
      wx.cloud.init({
        env: "arthurslog-test-d4537a",
        traceUser: true,
      })
    }
    this.globalData = {}
  }
})

Server:
cloudfunctions/arthurSlog_getInfo/index.js

</>复制代码 
// 云函数入口文件
const cloud = require("wx-server-sdk")
cloud.init()
// 云函数入口函数
exports.main = async(event, context) => {
  return event.userInfo
}

上面的Server端代码中

Server:
cloudfunctions/arthurSlog_getInfo/index.js

</>复制代码 
// 云函数入口文件
//const cloud = require("wx-server-sdk")
//cloud.init()
// 云函数入口函数
exports.main = async(event, context) => {
  return event.userInfo
}

没有调用到 “wx-server-sdk” 的方法，所以可以注释掉，不影响结果

这里提醒一下，就是 cloudfunctions 路径下的文件的名称，就是云端向小程序端提供的方法

举个栗子：对于cloudfunctions/arthurSlog_getInfo来说，arthurSlog_getInfo这个文件夹的名字就是云端向小程序端提供的方法

现在在小程序端就可以参考小程序端API文档（客户端）

大部分函数都来源于 对象“wx”，这个 “wx”对象 就类似于服务端的 “wx-server-sdk”对象

比如，在小程序端（客户端）有 wx.cloud.callFunction（）、wx.cloud.uploadFile（）等方法

再比如，在云端（服务端）有 cloud.init()、cloud.database()、cloud.collection（）等方法

现在，我们来接触一下 “小程序·云开发” 的 “存储管理功能”

打开小程序端的 miniprogram/pages/index/index.js

Client
miniprogram/pages/index/index.js

</>复制代码 
Page({
  data: {
    avatarUrl: "./user-unlogin.png",
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: "",
    fileID: "",
    cloudPath: "",
    imagePath: "./user-unlogin.png",
  },
  // ...
  // ...
  // ...
  // 添加前端代码,向云端上传图片
  arthurSlog_uploadImg: function() {
    // 选择图片
    const this_ = this
    wx.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        this_.setData({
          imagePath: tempFilePaths[0],
        })
        console.log(tempFilePaths[0])
      }
    })
  },
})

在这里，我们定义了一个方法arthurSlog_uploadImg，参考 小程序官方文档

首先将当前环境对象 映射 给对象 this_

Client
miniprogram/pages/index/index.js

</>复制代码 
const this_ = this

使用 wx.chooseImage 方法，打开本地文件，选择要上传的文件

在success函数里，使用setdata函数，更新 imagePath 对象的值，并使得页面上对应的部分重新渲染

现在，我们来更新页面文件：

Client
miniprogram/pages/index/index.wxml

</>复制代码 
  
  
  
    点击获取 openid
  
  
  
    点击返回两个对象之和
  
  
  
    上传图片
  
  
  
    
  

这次使用的方法，不需要自己编写云端服务代码，腾讯公司已经提供了

保存文件，在模拟器中点击上传图片（我放了一张演示图片在此路径下：miniprogram/images/ArthurSlog.png）

选中要上传的文件，点击“打开”

正常执行之下，会显示出我们刚刚上传的图片，到这里暂停一下，现在图片还没发送出去

在下一篇中，再继续补充

至此，我们实现了一个选取本地文件，并显示选中的图片文件。