Преимущества облачного хранилища изображений Qiniu

Поддержка масштабирования изображения различных размеров;
Поддержка автоматического сжатия изображений;
Поддержка добавления водяных знаков: водяной знак изображения, текстовый водяной знак в двух режимах;
Картинка анти-пиявка, ограничение доступа к источникам;
Настройте доменное имя изображения, которое выглядит более атрибутивным;
Статистика различных данных доступа к картинкам;
Поддержка загрузки файлов журнала, которые можно сохранять в течение 30 дней, что удобно для устранения неполадок программы;

водяной знак

Гибкая конфигурация водяного знака: можно задать положение, прозрачность и т. д. Одновременно поддерживаются два режима водяного знака изображения и текста, как показано на рисунке:

Обработка изображений

Лучше всего использовать при обработке изображений создание различных эскизов, которые очень просты в использовании и требуют только добавления параметров.

Например, если мне нужно получить уменьшенное изображение с соотношением сторон 200*200, мне просто нужно добавить "?imageView2/0/w/200/h/200" к исходному соединению. Полный путь выглядит следующим образом: http://icdn.apigo.cn/68.jpg?imageView2/0/w/200/h/200

Более подробная документация: https://developer.qiniu.com/dora/manual/1279/basic-processing-images-imageview2

загрузить изображение

Шаги загрузки

Проще говоря, загрузка изображения делится на два этапа:

Сгенерировать токен в соответствии с AccessKey + SecretKey (можно посмотреть в Личном центре = «Управление секретными ключами») + ведро (имя хранилища);
Используйте источник изображения (файловый поток/адрес файла) и токен для отправки информации в Qiniu для хранения изображений;

Загрузить способ

Есть два способа загрузки:

Загрузка на стороне сервера: разделена на загрузку локального файла, загрузку массива байтов;
Загрузка клиента: загрузка Base64 напрямую;

В этой статье серверная часть разрабатывается с помощью nodejs, а клиентская — с помощью javascript.

Сторона сервера - загрузка nodejs

Прежде чем начать загрузку, вам сначала нужно получить токен, который семь крупного рогатого скота, первый шаг - шаг загрузки, токен универсален, независимо от того, сервер или клиент загружают значения токена загрузки, общие, чтобы понять, что код одинаков. .

получить токен

Установите Qiniu SDK с помощью npm:

npm install qiniu

Используйте следующий код, чтобы получить uploadToken:

var accessKey = 'xxx'; //可在个人中心=》秘钥管理查看
var secretKey = 'xxx'; //可在个人中心=》秘钥管理查看
var bucket = "apigo";  //存储空间名称
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 });

Примечание. С помощью этого метода получается uploadToken во всех аспектах реализации, описанных ниже.

Способ 1: загрузка локального файла

код показывает, как показано ниже:

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';  //上传到服务器的名称
var localFile = "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);
  }
});

Среди них объекты, соответствующие машинному залу, следующие:

Восточный Китай qiniu.zone.Zone_z0
Северный Китай qiniu.zone.Zone_z1
Южный Китай QINIU.ZONE.ZONE_Z2.
Северная Америка qiniu.zone.Zone_na0

Способ 2: загрузка байтового массива

Полная идея реализации: запрос input[type=file]Post главной страницы в фоновый режим, фоновое преобразование считывает объект файлового потока и передает его в Qiniuyun, а затем использует putStream для сохранения файла.

код стойки регистрации

<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>

серверный код nodejs

var _file = this.file("f"); //前台type=file post过来的文件
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 = "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);
  }
});

Способ 3: загрузка массива поля поворота Base64Это также один из наиболее распространенных способов использования Base64 для передачи данных во внешнем и внутреннем интерфейсе, особенно для передачи значений с разных платформ, таких как мобильные телефоны и планшеты. Отправка данных на ПК. мы просто конвертируем Base64, переданный нам на стойке регистрации, в Объект файлового потока загружается с помощью putStream, Конкретный код nodejs выглядит следующим образом:

import { Duplex } from 'stream';

var b64string = 'xxx';   //base64必须去掉头文件（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);
  }
});

Следует отметить, что строка base64 должна быть удалена из файла заголовка (data:image/png;base64,) для преобразования потока байтов.

на стороне клиента - загрузка javascript

Шаг 1: Ссылка QINIU.MIN.JSСначала введите файл qiniu.min.js, формат: https://unpkg.com/qiniu-js@/dist/qiniu.min.js.

где номер версии, проверьте выпущенную версию: https://github.com/qiniu/js-sdk/releases, пример: https://unpkg.com/qiniu-js@2.3.0/dist/qiniu.min .js

<script type="text/javascript" src="https://unpkg.com/qiniu-js@2.3.0/dist/qiniu.min.js"></script>

Шаг 2: Получите токен загрузкиОбратитесь к приведенному выше, чтобы получить общий метод uploadToken.

Шаг 3. Загрузите напрямую в режиме base64.

//base64模式直接上传
var base64 = 'xxx'.replace('data:image/png;base64,', '');
var imgName = toBase64('xxx.png'); //自定义文件名必须是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;
}

будь осторожен:

Параметр url обращает внимание на область хранения.URL-адрес отличается в разных регионах, upload.qiniup.com в Восточном Китае, upload-z1.qiniu.com в Северном Китае, upload-z2.qiniu.com в Южном Китае. , upload-na0.qiniu.com в Северной Америке;
Имя файла (imgName) должно быть в формате base64;
Формат значения заголовка запроса Authorization: "UpToken" + uploadToken (сервер получает uploadToken, см. выше);

Другие языки разработки:developer.riding bull.com/fast #off ICI A…

Справочная документация:developer.riding bull.com/KO do/horror/132…

Откройте свое путешествие

Ссылка для регистрации:портал Riding Bull.com/sign up?code…