前段时间在写我的VUE全栈项目的时候,遇到要把前端的照片上传到后端,再由后端存到数据库的问题,通过网上查找资料,看了一些其他写者的解决方法,最终采用转BASE64的方法。本人觉得把上传的图片转为BASE64格式相比其他是比较简单的。
Base64是一种用64个字符来表示任意二进制数据的方法。它是一种编码方式,而非加密方式,即可以将一张图片数据编码成一串字符串,使用该字符串代替图像地址。
虽然说这种方式不适用于体积大的图片,但不得不说有时候还挺方便的。由于在我的vue项目中上传的图片都比较小,单一,为了方便我采用了这种方式来实现将前端上传的图片存到数据库中。话不多说,进入正题!下面以Vue+Koa框架、数据库为MYSQL为例。
export function uploadImgToBase64 (file) { return new Promise((resolve, reject) => { const reader = new FileReader()//html5提供的一种异步文件读取机制 reader.readAsDataURL(file)//将文件读取为Base64编码的数据URL reader.onload = function () { // 图片转base64完成后返回reader对象 resolve(reader) } reader.onerror = reject }) }前端要为转为base64的图片的相应操作
const state = reactive({ picture: [] //这个是用来装表单里选中的照片 }) const imgBroadcastListBase64 = [] //用来存放转base64后的照片,用数组是因为上传的图片可能不止一张 console.log('图片转base64开始...') // 遍历每张图片picture 异步 const filePromises = state.picture.map(async file => { //console.log(file); const response = await uploadImgToBase64(file.file) //调用函数 将图片转为base64 //console.log(response,111); return response.result.replace(/.*;base64,/, '') // 去掉data:image/jpeg;base64, }) // 按次序输出 base64图片 for (const textPromise of filePromises) { imgBroadcastListBase64.push(await textPromise) } console.log('图片转base64结束..., ', imgBroadcastListBase64) //判断imgBroadcastListBase64是否<=1,是的话就是上传一张图片,否则上传的是多张图片 if(imgBroadcastListBase64.length<=1){ state.imgsStr = imgBroadcastListBase64.join()//转字符串 }else{ state.imgsStr = imgBroadcastListBase64.join(',')//转字符串并且每个值用','拼接,这样是为了方便后面从数据库拿到数据,将图片又转为之前的base64格式 } //调用后端提供的接口,传数据到数据库里(这个只是自己编写的后端接口,主要是为了展示传数据) const res = await secondGoodsAdd({ create_time: ti, content_goods: state.content, color: state.title2, price: state.title3, tel: state.title4, img: state.imgsStr,//转base64后的图片 concat_num: 0, like_num: 0, name_goods: state.title1 }) if (res.code === '80000') { showSuccessToast('发布成功!') } router.push('/cicle')
存到数据库中的图片路径是转为base64后的且删除前面data:image/jpeg;base64的字符串。这样数据就存到数据库中啦!存进去的是字符串。
//堆代码 duidaima.com //我这里是在后端编写的接口,用于展示被添加到数据库中的所有数据 router.get('/cirleLifeLook',async(ctx,next)=>{ try { const result=await userService.cirleLifeLook() for(let i=0;i<result.length;i++){ var imgData=result[i].img //获取每条数据中的照片字段 if(imgData){ if(imgData.indexOf(',')>-1){//存在','的话代表是多张图片的混合的字符串 let ans=imgData.split(',') //切割 获得多张之前切掉data...后的base64字符串 let s=[] for(let j=0;j<ans.length;j++){ s.push("data:image/png;base64,"+ans[j])//还原每张图片初始的base64数据 } result[i].img=s }else{ result[i].img="data:image/png;base64,"+imgData //就一张图片直接在前面拼接"data:image/png;base64," } } }//到此为止,在给前端传数据前就修改了其中每条数据里的照片地址,这样就可以正常显示啦 if(result.length){ ctx.body={ code:'80000', data:result, msg:'获取成功' } }else{ ctx.body={ code:'80005', data:'null', msg:'还没有信息' } } } catch (error) { ctx.body={ code:'80002', data:error, msg:'服务器异常' } } })
OK,到此就结束啦~现在是不是觉得把图片转base64还是挺简单的?还挺有用的?快去实践下吧。记住此方法只适合小图片类型的,大点的文件可能会崩掉哈!