uniapp: Image verification code verification problem handling

• Implementation of graphic verification code function

uniapp: Solve the graphic verification code problem and use arraybuffer binary to convert base64 format pictures (the image data format transmitted from the backend: x00\x10JFIF\x00\x01\x02\x00...)_❆VE❆'s blog - CSDN blog

• UI draft:

•  Requirement : Request the verification code image from the backend, and then the user enters the image verification code, and only executes the subsequent logic after the verification passes.
• Difficulty : How to instantly verify the value entered through the front-end input box with the image returned by the back-end
• Analysis : Our front-end cannot compare the value entered by ourselves and the image verification code transmitted by the back-end. One is in the format of the image, and the other is in the numeric/string type. How to solve this problem?
• Solution : I thought of two points, discussed with the backend, and used cookic to solve the problem. However, we tested it and did not get the cookic value. We did not find the specific reason; the second method was that he customized an md5 encrypted file. In the response header, after I got the value corresponding to the md5 , I wrote it into the request header in the verification request. Therefore, it also added a verification bridge to our front and back ends, thus realizing the image verification code. of verification.
• Code logic :

• View request :

 

• Realized renderings : Verification successful