Seven ox cloud picture storage advantages

  1. Support various sizes of picture zoom;
  2. Support automatic picture compression;
  3. Support watermarking: image watermarking, text watermarking two modes;
  4. Image anti-theft chain, limit access to sources;
  5. Set IP blacklist and whitelist, prevent malicious theft brush, attack;
  6. Custom image domain name, looks more attribution;
  7. Statistics of various access data of pictures;
  8. Support to upload log files, can be saved for 30 days, easy to eliminate program problems;

The watermark

Flexible watermarking configuration: position and transparency can be set, and both image and text watermarking modes are supported, as shown in the figure:

The image processing

Image processing inside the best use is to generate a variety of thumbnails, super use just need to add parameters.

For example, if I want to get a thumbnail of an image equal to 200*200, I just add “? ImageView2/0 / w / 200/200 / h “, all the paths are as follows: http://icdn.apigo.cn/68.jpg?imageView2/0/w/200/h/200

More detailed documentation: https://developer.qiniu.com/dora/manual/1279/basic-processing-images-imageview2

Image upload

Upload step

Simply put, there are two steps to uploading an image:

  1. Generate token according to AccessKey + SecretKey (can be viewed in personal center = “SecretKey management) + bucket (storage space name);
  2. Use picture source (file stream/file address) and token to submit information to Qiniu to store pictures;

Upload the way

There are two uploading methods:

  1. Server upload: local file upload, byte array upload;
  2. Client upload: Base64 upload directly.

Nodejs is used on the server side and javascript is used on the client side.

Server-side – NodeJS upload

Before uploading, you need to obtain the token of Qiniu, which is the first step of uploading. This token is universal, regardless of whether the server uploads or the client uploads, and the implementation code is the same.

Access token

  1. Install qiniu SDK using NPM:

npm install qiniu

  1. Get the uploadToken using the following code:
var accessKey = 'xxx'; // You can check var secretKey = in personal center ='xxx'; // You can check var bucket = in personal center ="apigo"; // Storage space name var MAC = new qiniu.auth.digest.mac (accessKey, secretKey); var options = { scope: bucket } var putPolicy = new qiniu.rs.PutPolicy(options); var uploadToken = putPolicy.uploadToken(mac);return this.jsonp({ 'token': uploadToken });
Copy the code

Note that the uploadToken in all of the following implementation aspects is taken from this method.

Method 1: Upload a local file

The code is as follows:

var config = new qiniu.conf.Config(); config.zone = qiniu.zone.Zone_z1; Var formUploader = new qiniu.form_up. formUploader (config); var putExtra = new qiniu.form_up.PutExtra(); var key='test.png'; // Upload the server name varlocalFile = "D:\\img\\test.png"; Formuploader. putFile(uploadToken, key,localFile, putExtra, function (respErr,
  respBody, respInfo) {
  if (respErr) {
    throw respErr;
  }
  if (respInfo.statusCode == 200) {
    console.log(respBody);
  } else{ console.log(respInfo.statusCode); console.log(respBody); }});Copy the code

Objects in the equipment room are as follows:

  • East China qiniu. Zone. Zone_z0
  • North China qiniu. Zone. Zone_z1
  • South China qiniu. Zone. Zone_z2
  • North American qiniu. Zone. Zone_na0

Mode 2: Byte array upload

Input [type=file]Post request to the background, background conversion read file flow object passed to seven niuyun, use putStream to save the file.

The front desk code

<form action="http://127.0.0.1:8360/qiniu/upload" method="POST" enctype="multipart/form-data">
    <input name="f" type="file" />
    <button type="submit"</button> </form>Copy the code

Nodejs server-side code

var _file = this.file("f"); / / at the front desktypeVar putExtra = new qiniu.form_up.putextra (); var config = new qiniu.conf.Config(); config.zone = qiniu.zone.Zone_z1; Var formUploader = new qiniu.form_up. formUploader (config); var key ="test1.png";
var readStream = fs.createReadStream(_file.path); Formuploader. putStream(uploadToken, key,readStream, putExtra, function (respErr,
  respBody, respInfo) {
  if (respErr) {
    throw respErr;
  }
  if (respInfo.statusCode == 200) {
    console.log(respBody);
  } else{ console.log(respInfo.statusCode); console.log(respBody); }});Copy the code

Three: It is also one of the more common ways to transfer data using Base64 before and after uploading byte array, especially for the transmission of values on different platforms, such as mobile phones and tablets to Post data to PC. Similar to the implementation of method 2, we just convert the Base64 transferred to us from the foreground into file stream objects. PutStream is used for uploading. The nodejs code is as follows:

import { Duplex } from 'stream';

var b64string = 'xxx'; // Base64 must go back to the file (data:image/ PNG; Base64,) var buff = new Buffer(b64String,'base64') var stream = new Duplex(); stream.push(buff); stream.push(null); var putExtra = new qiniu.form_up.PutExtra(); var config = new qiniu.conf.Config(); config.zone = qiniu.zone.Zone_z1; Var formUploader = new qiniu.form_up. formUploader (config); var key ="test.png";
formUploader.putStream(uploadToken, key, stream, putExtra, function (respErr,
  respBody, respInfo) {
  if (respErr) {
    throw respErr;
  }
  if (respInfo.statusCode == 200) {
    console.log(respBody);
  } else{ console.log(respInfo.statusCode); console.log(respBody); }});Copy the code

One thing to note is that base64 strings must be turned around files (data:image/ PNG; Base64,) for byte stream conversion.

Client -javascript upload

Import the qiniu.min.js file in the format of https://unpkg.com/qiniu-js@/dist/qiniu.min.js

Which is the version number, check the release version: https://github.com/qiniu/js-sdk/releases, example: https://unpkg.com/[email protected]/dist/qiniu.min.js

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/qiniu.min.js"></script>
Copy the code

Step 2: Obtain uploadToken Refer to the general method to obtain uploadToken above.

Step 3: Upload directly in Base64 mode

// Base64 mode Direct upload var base64 ='xxx'.replace('data:image/png; base64,'.' ');
var imgName = toBase64('xxx.png'); // The custom filename must be base64 var URL ="http://upload.qiniup.com/putb64/-1/key/" + imgName; //非华东空间需要根据注意事项-修改上传域名(upload.qiniup.com)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4) {console.log(xhr.responsetext); } } xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type"."application/octet-stream");
xhr.setRequestHeader("Authorization"."UpToken " + uploadToken);
xhr.send(base64);


function toBase64(data) {
	var toBase64Table = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
	var base64Pad = '=';
    var result = ' ';
    var length = data.length;
    var i;
    // Convert every three bytes to 4 ascii characters.                                                   

    for (i = 0; i < (length - 2); i += 3) {
        result += toBase64Table[data.charCodeAt(i) >> 2];
        result += toBase64Table[((data.charCodeAt(i) & 0x03) << 4) + (data.charCodeAt(i + 1) >> 4)];
        result += toBase64Table[((data.charCodeAt(i + 1) & 0x0f) << 2) + (data.charCodeAt(i + 2) >> 6)];
        result += toBase64Table[data.charCodeAt(i + 2) & 0x3f];
    }

    // Convert the remaining 1 or 2 bytes, pad out to 4 characters.     
    if (length % 3) {
        i = length - (length % 3);
        result += toBase64Table[data.charCodeAt(i) >> 2];
        if ((length % 3) == 2) {
            result += toBase64Table[((data.charCodeAt(i) & 0x03) << 4) + (data.charCodeAt(i + 1) >> 4)];
            result += toBase64Table[(data.charCodeAt(i + 1) & 0x0f) << 2];
            result += base64Pad;
        } else{ result += toBase64Table[(data.charCodeAt(i) & 0x03) << 4]; result += base64Pad + base64Pad; }}return result;
}
Copy the code

Note:

  1. Upload.qiniup.com in East China, Upload-Z1.qiniu.com in North China, Upload-Z2.qiniu.com in South China, Upload-Na0.qiniu.com in North America, upload-na0.qiniu.com in North America.
  2. The file name (imgName) must be base64;
  3. The value format of the request header Authorization is “UpToken “+ uploadToken (server obtains uploadToken, see above);

More development languages: developer.qiniu.com/sdk#officia…

Reference: developer.qiniu.com/kodo/kb/132…

Start your journey

Registration link: portal.qiniu.com/signup?code…