厦门建站价格,域名注册长沙有限公司,网页设计实训总结报告大全,如何找到能够建设网站的人在不久前录制过这样一门课程#xff0c;使用uniapp生态开发API接口#xff0c;通过这套课程#xff0c;你不需要后后端Java、Python、PHP等后端语言#xff0c;你只需要用前端的知识就可以构建这样一套API接口#xff0c;而且使用uniapp生态开发接口更简单高效#xff0c…
在不久前录制过这样一门课程使用uniapp生态开发API接口通过这套课程你不需要后后端Java、Python、PHP等后端语言你只需要用前端的知识就可以构建这样一套API接口而且使用uniapp生态开发接口更简单高效如果没有学习过这么课程的同学 一定要去看一下这们课程。基于uni-app生态开发API接口
当初录制这么课程的时候只是完成了常规的数据交互现在有个需求就是前端通过接口上传图片的操作从网上找过很多的实现方案有些内容不够全面有些方法失效了那么通过这篇帖子通过实际的案例来介绍一下前后端如何联调实现本地图片上传的。
客户端代码
button clickfileUpload classavatar-wrapperimage classavatar :srcavatarUrl2 modeaspectFill/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.size1024*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.size1024*1024){return uni.showToast({icon:none,title:图片不能超过1M})} // 获取微信拿到的图片的临时地址并保存到本地 uni.getImageInfo({src: tempFiles.tempFilePath,success: (image) {console.log(image);if(image.typepng||image.typejpeg){// 对符合类型的图片转换为base64类型uni.getFileSystemManager().readFile({// 小程序官方提供的base64转码APIfilePath:image.path,// 所需转码图像路径encoding:base64,// 转码类型success:(res){ let imageBase64data: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;//返回上传文件路径};以上代码有些字自己编写的有些是从网上获取的灵感思路最终整合成这种方案了因为网上还基本没有写云函数URL化上传到unicloud云存储的完整方法这里就通过一个小案例将本地图片上传到unicloud云存储的方式详细的代码开源出来帮助有需要的同学如果对你有帮助请记得点赞收藏哦。
