Use JS plupload to directly upload images in batches to Youpai Cloud_javascript skills

Forums or post bars often need to share a lot of pictures. The worse way to upload pictures is to upload them to a central server, and then the central server forwards them to the static picture server. This article will introduce how to use plupload to optimize the upload process and directly upload images in batches to Youpai Cloud, bypassing the server. This article will focus on the following key points:

Copy code The code is as follows:

plupload library
Local compression of images
Multiple selection of pictures
Bypass the server and directly upload pictures in batches to Youpai Cloud
Use Youpai’s HTTP FORM API
plupload configuration

plupload library

plupload is a very rich image upload plug-in. Batch uploads can be supported through Flash/Silverligh/html4 for lower version browsers, while for higher version browsers, the HTML5 interface will be used first for uploading. All these determinations are automatic, and it can be said to be very convenient to use! Secondly, plupload also supports functions such as compressing images on the client and directly Drag&Drop for uploading. For more information, you can go to its official website.

Here we only use its core API and only need to introduce a file.

Copy code The code is as follows:

The official core API example is very simple, you can directly go to http://www.plupload.com/examples/core to view it. There is no difficulty in understanding the core API. If you need help, you can ask me questions later in this article.

Local compression of images

Generally, the quality of pictures viewed on the web is not high. I remember when I was learning PS in high school, the teacher said that the resolution of online pictures should be set to 72, and for printed pictures, it should be set to 300. Therefore, when a user uploads a large photo, a better approach is for the user's client to compress the image locally and upload the compressed smaller image, which does not affect the browsing effect and can also speed up the upload. speed, reducing the burden on the server.

The local compression function of images is supported in plupload. Just pass in a resize parameter when initializing it. Among them, the width and height can be set according to the actual situation, and quality is a more important parameter. As the name suggests, the smaller the value is set, the smaller the picture will be, but the display quality will be worse. You need to weigh this yourself. .

Copy code The code is as follows:

{
"resize": {
"width": 200,
"height": 200,
"quality": 70
}
}

Multiple selection of pictures

A prerequisite for batch uploading images is the ability to select multiple images. Multi-selection files are a standard feature of HTML5. We can enable multi-selection mode in the following ways:

Copy code The code is as follows:

Select images:

According to the section Multiple File selection in the browser support of a very excellent jquery plug-in jQuery-File-Upload, IE has only just begun to support this HTML5 feature until IE10, so we have to use Flash The magical power to support multiple image selection in lower version browsers. Fortunately, plupload has already done this for us, and this switch is enabled by default. If you feel you don't need to use multi-selection images, you can set multi_selection: false to turn off this feature.

Bypass the server and directly upload pictures in batches to Youpai Cloud

Youpaiyun provides HTTP FORM API. Through this interface, we can directly initiate a request to upload images from the browser without having to go through our own server, which greatly reduces the overhead.

Use Youpai’s HTTP FORM API

To use this interface, you need to send a form to Youpaiyun. This form contains the files you want to upload, and also needs to include policy and signature. Policy is used to set upload request-related parameters, such as storage path, file type, preprocessing results, etc. In addition, it also includes the upload request grant time, etc. Signature is used for security verification.

For the convenience of demonstration, javascript is used directly to generate Policy and Signature. But in actual use, for security reasons, please complete this process on the server side. The following code has been slightly modified based on the official demo, mainly using the official test account. For the specific generation method of these two parameters, please refer to the official documentation: http://docs.upyun. com/api/form_api/.

Copy code The code is as follows:

var options = {
'bucket': 'demonstration',
'save-key': '/test/filename.txt',
'expiration': Math.floor(new Date().getTime() / 1000) 86400
};
// View more parameters: http://docs.upyun.com/api/form_api/#Form API interface introduction
var policy = window.btoa(JSON.stringify(options));
// Get form API from UPYUN user management background
var form_api_secret = '1 JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// Calculate signature
var signature = md5(policy '&' form_api_secret);

plupload configuration

How to make plupload work with Youpaiyun's HTTP FORM API really gives me a headache. While looking at the documentation of plupload, I accidentally discovered that the link to Upload to Amazon S3 attracted me. The full name of Amazon S3 is Amazon Simple Storage Service. The cloud storage service it provides is more or less similar to Youpaiyun.

So based on the introduction of browser-side configuration in this article, I figured out the configuration needed to upload to Youpaiyun. In fact, it is very simple to say, the main thing is to configure the two parameters of url and multipart_params. In the following example, options.bucket, policy, and signature directly use the values ​​calculated in the previous section.

Copy code The code is as follows:

var uploader = new plupload.Uploader({
...
url: 'http://v0.api.upyun.com/' options.bucket,
Multipart_params: {
          'Filename': '${filename}', // adding this to keep consistency across the runtimes
         'Content-Type': '',
        'policy': policy,
        'signature': signature,
},
...
});

Summary

In this way, I finally achieved the ability to bypass the server through plupload and upload images in batches to Youpai Cloud. plupload is really a very powerful library, but it does require a fee for commercial use. Please go to its official website to learn more!

Isn’t it very simple? The main reason is that the idea is very good and worth learning. If you have any questions, please leave a message with me and we can make progress together