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

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

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

客户端代码

javascript 复制代码
<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

javascript 复制代码
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;//返回上传文件路径
	
};

以上代码有些字自己编写的,有些是从网上获取的灵感思路,最终整合成这种方案了,因为网上还基本没有写云函数URL化上传到unicloud云存储的完整方法,这里就通过一个小案例,将本地图片上传到unicloud云存储的方式详细的代码开源出来,帮助有需要的同学,如果对你有帮助,请记得点赞收藏哦。

相关推荐
行走的鱼儿2 天前
Hbuilder X/Uniapp 关于app运行调试及mumu模拟器运行问题
uni-app·uniapp·hbuilderx·mumu·模拟器配置
漫天转悠5 天前
UniApp在Vue3下使用setup语法糖创建和使用自定义组件
vue.js·uniapp
h185385922447 天前
客运购票售票小程序校园巴士预约售票小程序开发方案php+uniapp
微信小程序·小程序·uni-app·php·uniapp·源码软件
苏世-顾长歌7 天前
解决背景图因为图片路径中携带括号导致图片无法显示的问题
微信小程序·uniapp
家里有只小肥猫9 天前
关于vue生命周期
uni-app·uniapp
Ares码农人生11 天前
vue.js组件和传值以及微信小程序组件和传值
vue.js·微信小程序·uniapp
秋田君12 天前
uni-app资源管理与图标使用全解
vue·uniapp
zhaoyapeng_14 天前
uniapp 小程序 周选择器
微信小程序·小程序·uni-app·uniapp
mosen86815 天前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
DK七七16 天前
当今陪玩系统小程序趋势,陪玩系统源码搭建后的适用于哪些平台
小程序·php·uniapp