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

news2024/11/20 14:38:57

在这里插入图片描述

在不久前录制过这样一门课程，使用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转码API
							filePath: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;//返回上传文件路径
	
};