Front-end processing images returned by the backend garbled

Problem Description:

  Backend interface request, return codes image distortion.

 

According random characters + JFIF markers to determine the binary stream is a JPEG file, instead of base64.

 

Solution:

    updateCode() {
      axios.get('ApiUrl', { responseType: 'arraybuffer' }).then((res) => {
        this.formData.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;
      });