質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

1回答

2362閲覧

Monacaでformdataを使って画像ファイルをアップする方法

kazzzstudio

総合スコア94

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/09/25 12:05

お世話になっております。

今、Monacaアプリをクライアントとして、Python Djangoで実装したサーバーサイドに画像ファイルをアップロードする処理を作成しています。しかし、うまくアップロードできず、サーバー上のログファイルにエラーが返ってきてしまいます。おそらくformdataの使い方が悪いのではないかと思うのですが、どう実装したら良いのかわからず悩んでいます。

django.utils.datastructures.MultiValueDictKeyError: "'image'"

画像ファイルは、スマホのカメラまたはアルバムから選択して取得しています。
クライアント側のJavascriptのコードは以下のようになっています。

Javascript

1function imageFileUploader(imageType, image) { 2 3 var credentials = { 4 filetype: imageType, 5 }; 6 var image_file = image; 7 8 $.ajax({ 9 url: HOST_NAME + "user/api/get_filename/", 10 type: 'GET', 11 dataType: 'json', 12 data: credentials, 13 timeout: 10000, 14 }) 15 16 .done(function (data) { 17 18 jsondata = JSON.parse(data); 19 image_file_name = jsondata.fileurl; 20 21 // Test if the image is shown -> success 22 document.getElementById("previewimage").src = image 23 24 var formData = new FormData(); 25 formData.append('filename', image_file_name); 26 formData.append('image', image); 27 28 $.ajax({ 29 url: HOST_NAME + "user/api/file_uploader/", 30 type: 'POST', 31 timeout: 10000, 32 data: formData, 33 processData: false, 34 contentType: false, 35 }) 36 .done(function (data) { 37 jsondata = JSON.parse(data); 38 alert("File upload completed..."); 39 }) 40 .fail(function (XMLHttpRequest, textStatus, errorThrown) { 41 alert(textStatus); 42 }) 43 .fail(function (XMLHttpRequest, textStatus, errorThrown) { 44 alert(textStatus); 45 }) 46 47} 48 49function snapPicture () { 50 51 navigator.camera.getPicture (onSuccess, onFail, 52 {quality: 50, destinationType: Camera.DestinationType.FILE_URI, 53 saveToPhotoAlbum: true}); 54 55 function onSuccess (imageURI) { 56 57 var file_name = imageFileUploader("T", imageURI); 58 if (file_name == "") { 59 console.log("False"); 60 } 61 else { 62 image_send(file_name); 63 } 64 } 65 66 function onFail (message) { 67 console.log("False"); 68 } 69}

一方、Python側のコードは以下の通りです。

Python

1def post(self, request, format=None): 2 outputLogFile("Upload Function is called...") 3 req_file_name = request.data['filename'] 4 req_image = request.FILES['image']

req_file_nameは問題なく取得することができています。
アドバイスをいただければ幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ajaxでファイルを送るのであればFileReaderを利用されたほうがよろしいのでは?

投稿2017/09/25 12:15

yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問