The premise is to call Baidu face recognition interface under the vue framework

vue project, unable to get this in the reader.onload function, unable to transfer the value to the global

Solution: if you encounter this problem, use let that = this to record this in the outer layer of reader.onload function, so that you can get this by using that in it

When calling Baidu's interface, an error is reported. The information is: "errorcode":222200,"errormsg":"request body should be json format".

Solution: at that time, my data was an object directly. Just wrap a bracket around the object and turn it into an array, as follows

let data = {

                      image: tempImgData,

                      image\_type: 'BASE64',

                    }

Become the following

let data = [{

                      image: tempImgData,

                      image\_type: 'BASE64',

                    }]

After the parameter format is adjusted, the interface is called again and another error is reported: image check fail, error code 222203. This problem is because the base64 format picture in the parameter passed in has a picture header (data:image/jpg;base64)

Solution: use this code to remove the image header

base64Img.replace(/^data:image\/\w+;base64,/, "")

Attach the whole function of face recognition

<input type="file" @change='getImgUrl($event)' id="ImgUrl">

  

// Get the information of uploaded pictures

    getImgUrl(e) {

      // console.log(e.target.files\[0\])

      let data = e.target.files\[0\]

      // Picture to base64

      this.changeImg(data)

    },

    // Picture base64 conversion

    changeImg(file) {

      let that = this

      var reader = new FileReader();

      var AllowImgFileSize = 2100000; //Upload failed when the maximum value of uploaded picture (unit byte) (2 m = 2097152b) exceeds 2M

      // var file = $("#image")\[0\].files\[0\];

      var imgUrlBase64;

      if (file) {

        //Read file into page as Data URL

        imgUrlBase64 = reader.readAsDataURL(file);

        reader.onload = function (e) {

          //Var imgfilesize = reader. Result. Substring (reader. Result. Indexof ("," + 1). Length; / / intercept the base64 code part (optional or not, need to communicate with the background)

          if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {

              alert( 'Upload failed, please upload no more than 2 M Picture!');

              return;

          }else{

            // imgData.replace(/^data:image\\/\\w+;base64,/, "");

            //Perform upload operation

            document.getElementById('showImg').src = reader.result

            let tempImgData = reader.result.replace(/^data:image\\/\\w+;base64,/, "")    // Remove the image header in front of base64

  

  

            let data = [{

              image: tempImgData,

              image\_type: 'BASE64',

            }]

            // Call Baidu interface for face recognition

            that.axios.post('/info/rest/2.0/face/v3/faceverify?'+'access\_token='+that.getedToken, data,

            ).then( res => {

              console.log(res)

            }).catch( err => {

              console.log(err)

            })

          }

        }

      }

    }

I hope I can help some children's shoes