preface

I forgot where I saw this topic, I think it is very interesting, let me tell you my answer and thinking process.

First of all, we need to know that images are generally transmitted in two ways: base64 and File objects.

Base64 pictures

The base64 encoding of the image must be seen by everyone:

The essence of Base64 is a string, and the parameters of the GET request are in the URL, so the base64 data of the figure can be directly put into the URL to achieve the GET request to transfer the picture.

The image file object is transferred to base64:

// img argument: file file or blob
const getBase64 = img= > {
  return new Promise((resolve,reject) = > {
    const reader = new FileReader();
    reader.onload = e= > {
      resolve(e.target.result);
    };
    reader.onerror = e= >reject(e); reader.readAsDataURL(img); })}Copy the code

The maximum length is about 10K. According to the encoding principle of Base64, the size of base64 image is 1/3 larger than the size of the original file. Therefore, base64 can only transmit some very small images. Large base64 images that are too long will be truncated.

However, this limit is imposed by the browser, not by the GET request itself. In other words, on the server side, the length of the GET request is theoretically infinite, that is, the image can be sent to any size.

The file object

Take a look at this scenario:

<form action="http://localhost:8080/" method="get">
    <input type="file" name="logo">
    <input type="submit">
</form>
Copy the code

Select the image and submit the form. The submission succeeds, but the interface does not receive the file. The requested URL will become http://localhost:8080/? Logo = XXX.png, but does not carry image data.

Normally, the file object data is placed in the body of the POST request and is form-data encoded.

Can a GET request have a body? The answer is yes.

GET and POST are not fundamentally different. They are two HTTP request modes with different packet formats (or specifications).

Those of you who have done low-level development may be familiar with it. Our C language colleagues told me that they received our HTTP request like this:

For example, a normal GET request they receive looks like this:

GET /test/? Sex =man&name=zhangsan HTTP/1.1 Host: http://localhost:8080 Accept: application/json, text/plain, */* Accept-encoding: gzip, deflate Accept-Language: zh-CN,zh; Q = 0.9 Connection: Keep AliveCopy the code

The POST request looks like this:

POST /add HTTP/1.1
Host: http://localhost:8080
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive

sex=man&name=Professional 
Copy the code

DELETE, PUT, and PATCH requests also contain such packets. When parsing the message, the underlying layer does not care what the request is, so the GET request can also have a body or form data.

Postman = postman (); postman = postman ();

At the end

In summary, GET requests can upload images, but the GET and POST specifications should be followed. If there is a background that allows you to do so, just hammer it!