Transmit pictures with Base64 encoding

Project requirements ：

Complete the image upload of the front end , But it's different from the previous uploaded pictures , The upload process is ：1 Click to take a picture 》》 Visit the camera program 》》 Return to the picture after taking the picture 》》 Send it to the system program to store pictures .（ Photo upload ）

Development framework ：

The front and rear ends are separated jeecgboot

Solution ：

Ideas

First of all, the traditional use of front-end upload components is not feasible , Because the front-end components are uploaded manually , What this demand needs is to take photos and upload them automatically . So I thought of code uploading , To understand the common image coding upload is base64 code .

Reference procedure

base64 Encoding and decoding

The coding content is inconsistent

Then I wrote it and tested it , It is found that the coding content of the front end is inconsistent with that received by the back end
Results found ：
In the process of transmission, the encoded content is automatically url Re code , So encode the image before reading and writing on the back end Decode twice url and base decode .

Program realization

front end

   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=>{
    
              //  Processing after uploading successfully 
              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=>{
    
              //  Handling of errors 
            })

          }else{
    
            this.tipcontent = ' Photographing error ';
            this.visible = true;
          }
        })
        // this.formData.imgList.push('')

      },

Back end programs ：

  @PostMapping(value = "/uploadBase64")
    public Result<?> generateImage(@RequestBody Base64 base64) {
    //  On byte array string Base64 Decode and generate pictures 
        String imgStr=base64.getBase64();
        if (imgStr == null) //  Image data is empty 
        {
    
            Result result = new Result();
          // System.out.println(" The picture is empty ");
            result.setMessage(" The picture is empty ");
            result.setSuccess(false);
            return result;
        }


        BASE64Decoder decoder = new BASE64Decoder();
        try {
    
            // Base64 decode 
            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) {
    //  Adjust abnormal data 
                    bytes[i] += 256;
                }
            }
            //  Generate jpg picture 
            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;
        }
    }

Cross-domain problem

Because the camera program and the system program are not on the same machine, there is a cross domain problem
Solution

axios Cross domain is two requests

Reference resources
Solution , The cross domain request server is for options Ask for something to return casually