使用base64编码传图片

Posted 2022-07-01 月屯

项目需求：

完成前端的图片上传，但是和以前的上传图片不一样，该次上传过程是：1点击拍照》》访问拍照程序》》拍好照后返回图片》》传给系统程序储存图片。（拍照上传）

开发框架：

使用的是前后端分离的jeecgboot

解决方案：

思路

首先传统的使用前端上传组件是不行的，因为前端组件上传都是手动上传，该需求需要的是拍好照后自动上传。故而想到了编码上传，了解常用的图片编码上传是base64编码。

参考程序

base64编码解码

编码内容不一致问题

然后写好后测试了一下，结果发现前端的编码内容和后端接受到的编码内容不一致
结果发现：
在传送过程中自动对编码内容进行了url再次编码，所以在后端进行图片读写前对编码进行两次解码url和base解码。

程序实现

前端

   takePictures() 
        let that=this
        axios(url:"http://127.0.0.1:5189/photo",
          headers: 
          "Referrer-Policy": "no-referrer-when-downgrade"
          ,method:'get'
        ).then(res=>
          if(res.status == '200')
           let base64= Object.assign(, , base64:res.data.file,name:res.data.filename.substr(6))
            postAction(window._CONFIG['domianURL']+"/sys/common/uploadBase64",base64).then(res1=>
              // 上传成功后的处理
              this.formData.imgList=res.data.filename;
              console.log(this.formData.imgList)
              let takePicture = '';
              takePicture = window._CONFIG['domianURL']+'/sys/common/static/temps/'+this.formData.imgList.substr(6);
              console.log(takePicture)
              this.formData.imgList = [takePicture];
              this.formData.imgList = res.data.filename;
            ,err=>
              // 出现错误时的处理
            )

          else
            this.tipcontent = '拍照错误';
            this.visible = true;
          
        )
        // this.formData.imgList.push('')

      ,

后端程序：

  @PostMapping(value = "/uploadBase64")
    public Result<?> generateImage(@RequestBody Base64 base64) // 对字节数组字符串进行Base64解码并生成图片
        String imgStr=base64.getBase64();
        if (imgStr == null) // 图像数据为空
        
            Result result = new Result();
          //  System.out.println("图片为空");
            result.setMessage("图片为空");
            result.setSuccess(false);
            return result;
        


        BASE64Decoder decoder = new BASE64Decoder();
        try 
            // Base64解码
            imgStr = URLDecoder.decode(imgStr);
            imgStr = imgStr.replaceAll(" ", "+").replace("data:image/jpeg;base64,", "");
          byte[] bytes = decoder.decodeBuffer(imgStr);
            for (int i = 0; i < bytes.length; ++i) 
                if (bytes[i] < 0) // 调整异常数据
                    bytes[i] += 256;
                
            
            // 生成jpg图片
            OutputStream out = new FileOutputStream("D://Image//temps//"+base64.getName());
            out.write(bytes);
            out.flush();
            out.close();
            System.out.println("success");
            Result result = new Result();
            result.setSuccess(true);
            return result;
         catch (Exception e) 
            Result result = new Result();
            result.setSuccess(false);
            System.out.println("error");
            return result;
        
    

跨域问题

因为相机程序和系统程序不在一台机器上所以出现了跨域问题
解决方案

axios跨域是两次请求

参考
解决方案，跨域的请求服务端对于options请求随便返回的东西