[Solved] Font End Image Display Error: net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)

(1) The pictures are stored in the database

Use the el-upload component to convert the picture into a string in Base64 format and store it in the MySQL database. The field type is longtext.

(2) Error in front-end display picture

Get the picture data from the back end through the post request and assign it to Src. As a result, the picture cannot be displayed and an error: net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)

(3) Problem-solving

Add “data:image/jpeg;base64,” before the base64 format string.

this. form. userPhoto=”data:image/jpeg;base64,”+this. form. userPhoto;

Here, image/JPEG is the name of the data type, Base64 is the encoding method, and the data after the comma is the data taken from the database. You can also check the data URL on the Internet.

So the problem is solved.

Read More: