Как отправить двоичные данные с помощью WinJS.xhr (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Вы можете выкладывать и скачивать двоичные данные при использовании WinJS.xhr (что создает оболочку XMLHttpRequest). В этом примере показано, как выложить точечный рисунок из библиотеки изображений. Метод среды выполнения Windows, используемый для открытия файла точечного рисунка, возвращает IRandomAccessStream, поэтому необходимо использовать MSApp.createBlobFromRandomAccessStream, чтобы преобразовать его в Blob.

Предупреждение Вы можете использовать XMLHttpRequest, чтобы отправить или скачать объекты, размер которых больше нескольких мегабайт (таких как объекты Blob и FormData), что может потребовать больше времени. Так как работу приложений можно завершить в любой момент, для этих операций стоит использовать API среды выполнения Windows для передачи данных в фоновом режиме. Дополнительную информацию об отправке и скачивании содержимого см. в разделе Как отправить файл и Как скачать файл. Общую информацию о передаче данных в фоновом режиме см. в разделе Transferring data in the background.

Необходимые условия

Предполагается, что вы умеете создавать простые приложения с использованием библиотеки Windows для JavaScript. Дополнительная информация: Создание первого приложения среды выполнения Windows на JavaScript.

Инструкции

Этап 1: Настройка доступа приложения к библиотеке изображений и Интернету

В приложениях необходимо явным образом добавить определенные возможности, например доступ к определенной библиотеке на диске или доступ к сети. Дополнительную информацию о возможностях приложения см. в разделах Объявления возможностей приложения и Как настроить сетевые возможности.

В Visual Studio создайте пустое приложение JavaScript.
Откройте файл Package.appxmanifest и выберите вкладку Возможности.
Для версии примера для Windows возможность Интернет (клиент) должна быть уже выбрана, но если это не сделано, выберите ее. Если приложению может понадобиться возможность подключаться от имени клиента к веб-службам в домашней или рабочей сети, то также потребуется возможность Частные сети (клиент и сервер).

Для версии примера для Windows Phone выберите возможность Интернет (клиент и сервер).

Примечание Для Windows Phone предусмотрена только одна сетевая возможность Интернет (клиент и сервер), разрешающая приложению все типы сетевого доступа.
Выберите возможность Библиотека изображений.

Этап 2: Отправка точечного рисунка

Существует несколько асинхронных методов, которые управляют доступом к файлу. Эти асинхронные методы в JavaScript обрабатываются как любой другой объект Promise.

Примечание Подробнее см. в разделе Асинхронное программирование на JavaScript.

В раздел BODY файла default.html добавьте элемент DIV, который сообщает об успешной или неудачной отправке, и присвойте ему идентификатор "picDiv".
```
<div id="picDiv"></div>
```

В коде установите ссылки на DIV и библиотеку изображений.

var picDiv = document.getElementById("picDiv");
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;

Найдите нужный файл в библиотеке изображений. Файл можно было бы отправить с помощью WinJS.xhr, но давайте представим, что вам нужно повторно кодировать файл или обработать его другим образом. В функции completeFile предложения then метода getFileAsync откройте файл с помощью openAsync. Затем в функции completeStream предложения then метода openAsync выполните нужную обработку в открытом потоке файла, тип которого — IRandomAccessStream.
```
picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {
                // Do processing. 
    });
```

Перейдем к отправке. WinJS.xhr и XMLHttpRequest не принимают отправки типа IRandomAccessStream, поэтому необходимо преобразовать поток в Blob. Существует вспомогательная функция MSApp.createBlobFromRandomAccessStream, предназначенная специально для этого. Результат Blob можно добавить в параметр data в WinJS.xhr. Успешное или неудачное завершение отправки можно задать в предложении then в WinJS.xhr.

picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
    }).then(
        function completeStream(stream) {
            // Do processing. 
            var blob = MSApp.createBlobFromRandomAccessStream("image/bmp", stream);
            return WinJS.xhr({ type: "POST", url: <URI of the website>, data: blob });
        }).then(
            function (request) {
                picDiv.textContent = "uploaded file";
            }, 
            function (error) {
                picDiv.textContent = "error uploading file";
    });