（一）微信小程序云开发之上传图片（全流程讲解）_壁纸小程序云服务怎么上传照片

前言

        第一次写CSDN，有什么写的不清楚的地方大家指点。

        我本是做前端的，干了6年左右，前一阵接了个私活，做微信小程序。技术上小程序用的原生+vant，后台管理系统用的Vue+Element，本来是前后端分离按照正常流程去做，结果后端拉胯走了（He Tui~），最后因为前期用户量并不多，决定用小程序云开发先挺过这段时间。

        虽然小程序干了不老少，后端只会Python，但是我也是第一次用云开发写后端逻辑和操作数据库，不太熟悉，感觉会遇到很多坑，这就遇到了上传这个大坑。

需求介绍

        功能需求：小程序端是一般的表单提交+上传最多三张图片，后台管理系统也有上传，要求通过云开发中部署静态网站，调用云函数完成所有数据交互。

        碎碎念：接活之前已经用测试账号做过技术验证，也没什么问题，但是心里总有一种不安，感觉上传这块要遇大坑，想什么来什么。

前期技术验证

        由于是第一次做，肯定前期会看很多相应的文章或者逛逛社区，总的来讲网上的文章目前可以分为三类：

1. 在客户端使用wx.cloud.uploadFile上传图片
2. 将图片转为base64传至后台，用Buffer.from转回来存入云储存
3. 使用wx.cloud.CDN传输大文件，用Buffer.from转回来存入云储存

     

各方法的从开始到放弃

方法1，从想法到放弃

        上边也说了，我们完全没有后端，而且也确实需要web调用云函数，并且我希望所有数据库操作和上传等均在云函数中进行。所以在web端只用SDK调callFunction方法去做数据交互，再加上权限等问题果断放弃方法1。有老大就要说了，那就用先用wx.cloud.uploadFile解决小程序后边再说嘛，反正早晚也得解决，不如直接解决了算了（我不，强迫症，爱咋咋地）。

方法2，从验证成功到莫名报错到放弃

        对于没有干过的技术方案怎么能不认真验证可行性呢，坑了甲方咋办！（主要是怕扣我钱，我的小钱钱~），咳咳，言归正传。

        总的思路是这样的：（前期云开发准备工作跳过，自己搜去）

        （1）首先通过wx.chooseImage选择图片

chooseImages(){
    let _this = this
    wx.chooseImage({
        count: 3,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success(res){
            const tempFilePaths = res.tempFilePaths
            _this.setData({
                images: tempFilePaths
            })
        }
    })
}

        （2）使用 wx.getFileSystemManager().readFile()将图片转成base64字符串，然后callFunction传过去，如果多张上传就循环。

getImageBase64(){
    wx.getFileSystemManager().readFile({
        filePath: images,
        encoding: 'base64',
		success(response){
            wx.cloud.callFunction({
                name: 'quickstartFunctions',
                config: {
                    env: '******'
                },
                data: {
                    type: 'uploadPicture',
                    path: 'images/test.png',
                    file: response.data
                },
                success(res) {
                    console.log(res)
                }
            })
        }
    })
}

         （3）在云函数中接到base64然后转回来上传

const cloud = require('wx-server-sdk');
 
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
});
 
exports.main = async (event, context) => {
  try {
    return await cloud.uploadFile({
      cloudPath: event.path,
      fileContent: Buffer.from(event.file, 'base64')
    })
  } catch (e) {
    return e;
  }
}

        神奇的来了，技术验证顺风顺水，在实际开发中，CV大法过来改了改，结果报！错！了！连云函数都没进去。报了-404006

        面向百度变成的我，百了各种度，都没找到原因，但是只要不传base64就能进云函数，明明验证的代码还在那摆着，可他依旧报错坚挺，而且至今都不知道为啥（有知道的告诉告诉孩子吧，孩子不容易啊）

        既然找不到原因那就果断放弃吧，毕竟世上无难事，只要肯放弃，我转向了方法3

方法3，从瞎蒙到抓狂到成功

        官方对wx.cloud.CDN的定义是这样的↓↓↓↓↓↓↓↓↓↓↓↓

        示例代码更是简单的不能再简单

        OK，我们能从这上边得出什么呢？当然啥都看不出来，TX技术文档某些部分的模糊程度大家都懂的，反正我看的云里雾里的。简单来说呢，wx.cloud.CDN需要放在wx.cloud.callFunction中用，就是用来传大文件的，它会在云函数中对应字段返回一个地址，通过地址拿到你传的数据，但是怎么拿，他！没！说！（Tui~）

        下面看我的代码，由于昨天弄了一天，虽然也是按照CDN方式弄的，但是图片无法查看。今天莫名其妙的调试成功了，还没来得及整理代码（凑合看吧）

        获取图片的步骤跟上边一样，可是为什么不用现成的代码块可以复制粘贴呢，因为我不想让你们粘，主要看imageUpload中的代码，最后我会解释为啥我上边刚说的wx.cloud.callFunction用，这就出幺蛾子了。

        解释一下，一共三个参数，file，path，suffix。file是CDN地址，把chooseImage获取的图片临时文件地址放入CDN中，返回个地址当做参数传到云函数中，path是云储存的地址，我只传了一个文件夹地址，剩下的交给云函数生成，suffix是文件后缀，我也不知道传的png还是jpg，而且保证上传的复用性，所以获取了个后缀一起传过去了，就这么简单。

        重点来了，怎么获取CDN地址中的数据嘞~有请axios，熟悉不，就是Vue中的axios，请求一下子不就好了。抄家伙！在云函数中安装依赖npm install axios --save，先安上，要不准报错undefined。

        也有人用got，我也用过了，不知道是不是版本原因不能用require引入，云函数又不能import，放弃。经过我的不懈努力！OK看代码

const cloud = require('wx-server-sdk')
const PARAMS = require('../params.json')         // 配置JSON
const SendData = require('../sendData/index')    // 发送数据回来的函数，加了code和是否成功
const axios = require('axios')                   // 引入axios
 
cloud.init({
	env: PARAMS.env
})
 
exports.main = async (event, context) => {
	try {
        // cloud.uploadFile可以接arraybuffer，所以获取类型设置为arraybuffer
		let imgBuffer = await axios({
		  method:'get',
		  url:event.data.file,
		  responseType: 'arraybuffer',
		  headers: { "Content-Type": "*" },
		})
        // 上传
		const cloudId = await cloud.uploadFile({
			cloudPath: event.data.path+'U'+Date.now()+event.data.suffix,
			fileContent: Buffer.from(imgBuffer.data)
		})
        // 成功后返回云储存的fileID
		return SendData(cloudId.fileID)
	} catch (e) {
		return SendData('图片上传失败', 200, false)
	}
}

        看看储存里，这就上传成功了。

        函数SendData中return的就是个JSON不用纠结我怎么写的，我只是懒。

其他

        刚才上边说CDN只能放在callFunction中使用，但是我放在了imageUpload中，心机之蛙一直摸你肚子！这就是我自己封装的，咳咳。我可不想每次都得写wx.callFunction巴拉巴拉，呸，代码太多了！

        其实本质就是callFunction，简单介绍一下我的做法，我将callFunction封装成了一个函数Call，把请求的云函数名和数据等进行操作整理，还有自定义loading文字，然后把Call暴露出来，建立api文件夹，引入Call，把所有的交互函数当做api一样进行统一管理。如果大家有兴趣我抽空可以把代码扔出来大家喷喷。

        如果大家觉得有帮助，做后台管理系统接口的时候再发一期怎么在vue项目中使用云函数，并且部署，我去整理代码，继续搬砖了，散会

碎碎念：也不一定会有第二期，毕竟我懒