unicloud云函数url化后，客户端通过url地址向云函数发送数据流并传递到云存储中

在这里插入图片描述

在不久前录制过这样一门课程，使用uniapp生态开发API接口，通过这套课程，你不需要后后端Java、Python、PHP等后端语言，你只需要用前端的知识就可以构建这样一套API接口，而且使用uniapp生态开发接口更简单高效，如果没有学习过这么课程的同学，一定要去看一下这们课程。基于uni-app生态开发API接口

当初录制这么课程的时候，只是完成了常规的数据交互，现在有个需求，就是前端通过接口上传图片的操作，从网上找过很多的实现方案，有些内容不够全面，有些方法失效了，那么通过这篇帖子，通过实际的案例，来介绍一下前后端如何联调实现本地图片上传的。

客户端代码

<button @click="fileUpload" class="avatar-wrapper"><image class="avatar" :src="avatarUrl2" mode="aspectFill"></image>
</button>//定义图片地址变量
const avatarUrl2 = ref('https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/xxmPath/useravatar.png');
//上传图片核心函数，将图片转base64，小程序和H5的方式不同，下面有条件编译
function fileUpload(){	// #ifdef H5	uni.chooseImage({count:1,success:res=>{let image = res.tempFiles[0];	if(image.size>=1024*1024){return uni.showToast({icon:"none",title:"图片不能超过1M"})}	getBase64(image).then(base=>{uni.request({url:"https://tea.qingnian8.com/filedemo",data:base,method:"POST",success:res=>{avatarUrl2.value = res.data.fileID}})})}})	// #endif// #ifdef MP-WEIXIN	uni.chooseMedia({count:1,mediaType:["image"],		success:(res)=>{let tempFiles = res.tempFiles[0];if(tempFiles.size>=1024*1024){return uni.showToast({icon:"none",title:"图片不能超过1M"})}			// 获取微信拿到的图片的临时地址并保存到本地			uni.getImageInfo({src: tempFiles.tempFilePath,success: (image)=> {console.log(image);if(image.type=='png'||image.type=='jpeg'){// 对符合类型的图片转换为base64类型uni.getFileSystemManager().readFile({// 小程序官方提供的base64转码APIfilePath:image.path,// 所需转码图像路径encoding:"base64",// 转码类型success:(res)=>{	let imageBase64='data:image/'+image.type+';base64,'+res.data;			uni.request({url:"https://tea.qingnian8.com/filedemo",data:imageBase64,method:"POST",success:res=>{avatarUrl2.value = res.data.fileID}})								}})}else{uni.showToast({title:'当前只支持png/jpeg格式',duration:2500,icon:'none'})}}});}})	// #endif
}//H5端，file转base64
function getBase64(file) {return new Promise((resolve, reject) => {///FileReader类就是专门用来读文件的const reader = new FileReader()//开始读文件//readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串，reader.readAsDataURL(file)// 成功和失败返回对应的信息，reader.result一个base64，可以直接使用reader.onload = () => resolve(reader.result)// 失败返回失败的信息reader.onerror = error => reject(error)})
}

unicloud云函数端接收base64

exports.main = async (event,context) => {	//接收前端传输过来的base64数据let imageBase = event.body;		//去除编码头let base64 = imageBase.split(",")[1];//获取文件后缀名let suffix = imageBase.split('/')[1].split(';')[0];let result = await uniCloud.uploadFile({//保存到云端的文件名cloudPath: Date.now() + "." + suffix,//base64转buffer（阿里云支持buffer和绝对路径）		fileContent: Buffer.from(base64,'base64'),success(res){//阿里云直接返回文件ID就是下载地址return result.fileID},fail(err) {reject(new Error(err.errMsg))}});			return result;//返回上传文件路径};