Recently, due to business needs, we need to implement a function to upload base64 encoded pictures to Qiniu. Because we do not select pictures to upload through the input file selection box, there is no way to use the convenient and user-friendly El-upload component provided by Element-UI.

I’ve never done that before. How can I do that? The so-called everything is not determined to ask Baidu, so Baidu, did not expect to find the answer soon, and this last function seven cattle official website has a very detailed documentation and examples.

However, they this document, write to understand to let a person feel a little laborious, at least I understand for a while, so I hope to use their own understanding to translate this document again!

Translation began

Parameter interpretation

Here in the interface description, POST refers to the upload path (i.e. the pathname part of the upload address), and variable parameters with <> marks. Specifically, I will talk about Fsize and EncodedKey, because I only use these two this time, and the other two EncodedMimeType and Crc32 are not used. I don’t know what it is, so I can’t talk about it!

Fsize: the size of the uploaded file can be set to -1, but it is not allowed to actively limit the size, according to the body of the HTTP request itself. Here, because I can’t determine the size of the image I cut, I choose -1.

The explanation for EncodedKey is a little more convoluted:

If this parameter is not specified: If uptoken.SaveKey exists, the key is generated based on SaveKey; otherwise, the hash value is used as the key. EncodedKey is base64 encoded. For details, see URL secure Base64 encoding

What is it for?

In fact, it is to set the file name of the uploaded picture stored in the seven cow server, if not set, then it is the same as hash! What do you mean?

/ / not set EncodedKey upload back {hash: "FmTRp9ZqAv9ZmlGHlnwRKEBXkPpy" key: "FmTRp9ZqAv9ZmlGHlnwRKEBXkPpy} / / set EncodedKey upload after return {hash:" FmTRp9ZqAv9ZmlGHlnwRKEBXkPpy "key: "20201224162721914S.jpeg" }Copy the code

Yes, if you do not set this value, then the file name uploaded is automatically generated for you by Seven cows hash value, and no suffix name! The browser can recognize it, but if the user wants to save it, it’s awkward — it doesn’t look like a picture, like an electronic invoice for an expense account. Isn’t that intuitive? The mood that may affect finance, provoked finance to buckle your salary can be deficient big! So, or configuration is wonderful!

Note: the description of the document in the main display of these words – need to be base64 encoding, you read correctly, you must be the name you want to name (such as: 20201224162721914S.jpeg) to base64 encoding first, otherwise error! Fortunately, JavaScript already provides such an API, btoa().

btoa('20201224162721914S.jpeg'); // => MjAyMDEyMjQxNjI3MjE5MTRTLmpwZWc=
Copy the code

It is also worth noting that this name should not be used twice. This means that you must use a different name every time you upload an image, otherwise seven Cows will tell you that file exists. So here I use the current timestamp to generate the image name!

Sample code for request

function putb64(){
  var pic = "Fill in the string after your base64";
  var url = "http://upload.qiniup.com/putb64/-1/key/<EncodedMimeType>"; // Change the uploaded domain name according to Caution 1
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4) {document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type"."application/octet-stream");
  xhr.setRequestHeader("Authorization"."UpToken Fill in the upload token you get from the server.");
  xhr.send(pic);
}
Copy the code

This is the official example code given using native JS, of course, you may also use jquery and Axios with your own projects.

Parameter Description 2

  1. picThat’s what you generatebase64The encoded picture, that’s a long, long stringbase64String,The thing to notice here is that you have to putbase64,And remove the prefixHow do you generate yoursbase64Encoding images, that is your own business needs, I use because I want to automatically capture the content of a certain element in the web page to generate images, sohtml2canvasGenerate images (html2canvasUse the process also encountered some, behind another to write a pit point);
  2. urlUpload the address, which domain name part is sub-region, should be based on your own server body in which region, notes there are very detailed instructions:Upload.qiniup.com upload domain for east China space. Upload-z1.qiniup.com is used for North China space, Upload-Z2.qiniup.com is used for South China space and Upload-na0.qiniup.com is used for North America space;
  3. Authorization: This is what your company’s back end (if you’re a great full stack engineer) gets by calling the seven Cow interfacetokenWhat is worth noting here is thatUpToken This string of characters can’t be short,Including that space!

Write in the last

The above is their own official documents, the actual operation of the hair of some understanding, some tricky at the beginning, but finally succeeded, so write this to deepen the impression, if there is the same need of the students, can also refer to!