前言

前段时间在写我的VUE全栈项目的时候，遇到要把前端的照片上传到后端，再由后端存到数据库的问题，通过网上查找资料，看了一些其他写者的解决方法，最终采用转BASE64的方法。本人觉得把上传的图片转为BASE64格式相比其他是比较简单的。

什么是BASE64

Base64是一种用64个字符来表示任意二进制数据的方法。它是一种编码方式，而非加密方式，即可以将一张图片数据编码成一串字符串，使用该字符串代替图像地址。

BASE64的优缺点

优点： 减少一张图片的http请求

缺点： 导致转换后的css文件体积增大，而CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕，而且转换后的数据是一大串字符串。

注意：图片转BASE64格式的适合小图片或者极简单图片，大图片不划算。它的格式为：data:image/type;base64,xxxx...

虽然说这种方式不适用于体积大的图片，但不得不说有时候还挺方便的。由于在我的vue项目中上传的图片都比较小，单一，为了方便我采用了这种方式来实现将前端上传的图片存到数据库中。

话不多说，进入正题！下面以Vue+Koa框架、数据库为MYSQL为例。

案例

前端： 首先在把图片传给后端之前，前端对图片进行格式转换，转换成功后就可以照常调用后端给的接口，传进去就行。

我这里就是点了提交按钮后，触发编写的点击事件函数，在函数里先对图片转base64，转成功后再调用后端给的接口，把此数据以及其他数据传进去就行。

在前端编写转base64的函数(很重要)

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的字符串。

这样数据就存到数据库中啦！存进去的是字符串。

那么问题来了，数据是存进去了，但是我又想拿到这个数据到前端显示出来，好，那我就先直接拿到前端用，结果发现报错了！说是请求头太长？想办法解决下!后面我的解决办法是拿到这个转为了base64且去掉前面data...字段的的图片数据再转为正常的base64的格式。好，来转换吧！

//我这里是在后端编写的接口，用于展示被添加到数据库中的所有数据

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还是挺简单的？还挺有用的？快去实践下吧。记住此方法只适合小图片类型的，大点的文件可能会崩掉哈！

结束语

本篇文章就到此为止啦，由于本人经验水平有限，难免会有纰漏，对此欢迎指正。如觉得本文对你有帮助的话，欢迎点赞收藏❤❤❤，您的点赞是持续写作的动力，感谢支持。要是您觉得有更好的方法，欢迎评论，提出建议！