Source: The profile picture is modified in the front end, and the profile picture data returned in the back end is a binary stream.

The returned data cannot be used as a path directly. You need to convert the data format to Base64.

Set responseType to “arrayBuffer”;

let url = ' ';
if (res && res.data) {
   let r = btoa(
       new Uint8Array(res.data).reduce((d, byte) = > d + String.fromCharCode(byte), ' ')
   )
   url = 'data:image/png; base64,' + r;
}  
Copy the code

Results after treatment:

Expanding knowledge:

Btoa bTOA (stringToEncode) creates a Base-64 encoded ASCII String from a String object, where each character in the String is treated as a binary data byte. StringToEncode: A string of characters representing individual bytes of binary data to be encoded as ASCII. Returns a string containing a Base64 representation of stringToEncode.

let encodedData = window.btoa("This is a test string."); / / code
let decodedData = window.atob(encodedData);    / / decoding
Copy the code

Note: Since this function treats each character as a byte of binary data, regardless of the actual number of bytes that make up the character, InvalidCharacterError will be raised if any character’s code point is outside the range of 0x00 to 0xFF. You can use this method to encode data that could cause communication problems, transmit it, and then decode the data again using the ATOB () method. In most browsers, encoding Unicode strings with btoa() raises an InvalidCharacterError exception. One option is to escape any extension characters so that the actual encoded string is the ASCII representation of the original character.

function utoa(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}
// base64 encoded ascii to ucs-2 string
function atou(str) {
    return decodeURIComponent(escape(window.atob(str)));
}
// Usage:
utoa('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
atou('4pyTIMOgIGxhIG1vZGU='); // ✓ "✓ a la mode"

utoa('I \u2661 Unicode! '); // SSDimaEgVW5pY29kZSE=
atou('SSDimaEgVW5pY29kZSE='); / / "I ♡ Unicode!"
Copy the code

The Uint8Array array type represents an 8-bit array of unsigned integers that are initialized to 0 when created. Once created, you can refer to the elements of the array as objects or by using an array subscript index.

Syntax format:

new Uint8Array(a);// ES2017 latest syntax
new Uint8Array(length); // Create an array of unsigned integers with length initialized to 0
new Uint8Array(typedArray);
new Uint8Array(object);
new Uint8Array(buffer [, byteOffset [, length]]);
Copy the code

Use examples:

// from the length
var uint8 = new Uint8Array(2);
uint8[0] = 42;
console.log(uint8[0]); / / 42
console.log(uint8.length); / / 2
console.log(uint8.BYTES_PER_ELEMENT); // The number of bytes of the element in the array is 1

// from an array
var arr = new Uint8Array([21.31]);
console.log(arr[1]); / / 31

// From another TypedArray
var x = new Uint8Array([21.31]);
var y = new Uint8Array(x);
console.log(y[0]); / / 21

/ / from ArrayBuffer
var buffer = new ArrayBuffer(8);
var z = new Uint8Array(buffer, 1.4);

// from an iterator
var iterable = function* (){ yield* [1.2.3]; } ();var uint8 = new Uint8Array(iterable);
// Uint8Array[1, 2, 3]
Copy the code

The string.fromCharCode () method returns a String created by the specified UTF-16 code unit sequence.

Syntax: string.fromCharCode (num1[,…[, numN]])

Parameters: num1,… NumN A number in a series of UTF-16 code units. Ranges from 0 to 65535 (0xFFFF). Numbers greater than 0xFFFF are truncated. No validity check is performed.

Return value: a string of length N, consisting of N specified UTF-16 code units.

Use examples:

String.fromCharCode(65.66.67);   / / return "ABC"
String.fromCharCode(0x2014);       / / return "-"
String.fromCharCode(0x12014);      // also returns "-- "; The number 1 is dropped and ignored
String.fromCharCode(8212);         // also returns "-- "; 8212 is the decimal representation of 0x2014

// In UTF-16, supplementary characters require two code units (i.e. a proxy pair) :
String.fromCharCode(0xD83C.0xDF03); // Code Point U+1F303 "Night with
String.fromCharCode(55356.57091);   // Stars" == "\uD83C\uDF03"

String.fromCharCode(0xD834.0xDF06.0x61.0xD834.0xDF07); // "\uD834\uDF06a\uD834\uDF07**"**
Copy the code