¿Convertir imágenes a base64 para realizar la carga de imágenes? ¿Lo has aprendido?

prefacio

Cuando estaba escribiendo mi proyecto VUE full-stack hace algún tiempo, me encontré con el problema de cargar las fotos del front-end al back-end y luego guardarlas en la base de datos desde el back-end. Internet y leer algunas soluciones de otros escritores Finalmente, se adopta el método de conversión a BASE64. Creo que es relativamente simple convertir imágenes cargadas al formato BASE64 en comparación con otros.

¿Qué es BASE64?

Base64 es una forma de representar datos binarios arbitrarios con 64 caracteres. Es un método de codificación, no un método de cifrado, es decir, los datos de una imagen se pueden codificar en una cadena de cadenas, y la cadena se puede usar en lugar de la dirección de la imagen .

Ventajas y desventajas de BASE64

Ventajas: reduce la solicitud http de una imagen

Desventaja: el tamaño del archivo css convertido aumenta, y el tamaño del archivo CSS afecta directamente la representación, lo que hace que el usuario mire fijamente la pantalla en blanco durante mucho tiempo, y los datos convertidos son una gran cadena de cadenas.

Nota: La conversión de imágenes al formato BASE64 es adecuada para imágenes pequeñas o imágenes muy simples , y no es rentable para imágenes grandes. Tiene el formato: datos:imagen/tipo;base64,xxxx...

Aunque este método no es adecuado para imágenes grandes, hay que decir que a veces es muy conveniente. Dado que las imágenes cargadas en mi proyecto vue son relativamente pequeñas y únicas, por conveniencia, adopté este método para guardar las imágenes cargadas por el front-end en la base de datos.

Sin más preámbulos, ¡vamos al grano! A continuación se toma como ejemplo el marco Vue+Koa y la base de datos como MYSQL .

el caso

Front-end: primero, antes de pasar la imagen al back-end, el front-end convierte el formato de la imagen. Después de que la conversión sea exitosa, puede llamar a la interfaz proporcionada por el back-end como de costumbre, y simplemente pasar en.

我这里就是点了提交按钮后，触发编写的点击事件函数，在函数里先对图片转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还是挺简单的？还挺有用的？快去实践下吧。记住此方法只适合小图片类型的，大点的文件可能会崩掉哈！

结束语

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