質問
現在、Angular(ver5)でFile APIを用いて、ブラウザからAzureのBlobStorageに、
画像をアップロードするシステムを作成しています。
PCやiphone(実機)からは、正常にアップロードが行えるのですが、
Android(実機)からはアップロードに失敗します。
Androidのブラウザ(chrome,標準ブラウザ)からアップロードできるようにするには、
どのように実装すればよろしいでしょうか?
ご教示のほどよろしくお願いいたします。
前提
クライアントアプリは作成しない。
Webページの言語は、AngularまたはJavaScript
エラーメッセージなど
■ブラウザのエラー(PC版chromeからリモートで確認) PUT ’アップロードURL’ net::ERR_TIMED_OUT ■Angularにて取得したエラー エラーコード:0
試したこと
・AngularのHttpClientにてアップロード
・ajaxにてアップロード
・「angular-azure-blob-service」によるアップロード
3つともAndroidの実機からアップロードすると、本事象が発生いたします。
ちなみに、
公式のNode.jsはAngularだと、typescriptエラーが発生します。
また、公式のNode.jsを用いたサンプルページにアンドロイドから接続しても、アップロードに失敗します。
該当のソースコード
jquery + ajaxによる実装
$.ajax({ url: url, // sasを含めたアップロード用のURL type: "PUT", data: image , // Fileオブジェクト contentType: contentType, // 画像に応じたContent-Type headers: { 'x-ms-blob-type': 'BlockBlob', }, processData: false, }) .done(function (data, textStatus, jqXHR) { console.log(image.name+ ':アップロード終了:'); }) .fail(function (jqXHR, textStatus, errorThrown) { alert('サムネイルのアップロードに失敗しました \n XMLHttpRequest : ' + jqXHR.status + '\n エラーコード : ' + textStatus); });
AngularのHttpClientによる実装
var headers = new HttpHeaders({ 'x-ms-blob-type': 'BlockBlob', 'x-ms-blob-content-type': contentType, 'Content-Length': image.size, 'timeout': `${60000}` }); this.http.put(url, image, { headers: headers }) .subscribe(elem => { alert('アップロード完了:'); }, (err: HttpErrorResponse) => { console.log({ error: err }); if (err.error instanceof Error) { alert('アップロード失敗 + '\n エラーコード:' + err.status + '\n その他:' + err.type + '\n ' + err.url); } else { alert(`エラーコード: ${err.status}`); console.log(` エラーコード: ${err.status}`); } });
「angular-azure-blob-service」については、パッケージのサンプル通りの実装なので割愛いたします
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。