Q&A前提・実現したいこと
クライアントからBase64にエンコードした画像をJSONで送り,
サーバで受け取りたいです。
###発生した問題、やってみたこと
#####問題
サーバサイドでちゃんとJSONが受け取れているか確認のため、console.log(req.body)で
コンソールに表示をしようとしたところ
{}
という表示しかされず、JSONを受信できていないようでした。
#####試したこと
・クライアントサイドのデベロッパーツールでちゃんとエンコードできているか、確認したところ、そこは問題ないようでした。
・console.log(req.body)をconsole.log(req.body.data)で試しましたが、undefindでした。
・body-parserを使ったやり方も試しましたが、だめでした。
ソースコード
#####サーバサイド
appjs
1var createError = require('http-errors'); 2var express = require('express'); 3var path = require('path'); 4var cookieParser = require('cookie-parser'); 5var logger = require('morgan'); 6 7var indexRouter = require('./routes/index'); 8var usersRouter = require('./routes/users'); 9 10var app = express(); 11 12// view engine setup 13app.set('views', path.join(__dirname, 'views')); 14app.set('view engine', 'jade'); 15 16app.use(logger('dev')); 17app.use(express.json()); 18app.use(express.urlencoded({ extended: false })); 19app.use(cookieParser()); 20app.use(express.static(path.join(__dirname, 'public'))); 21 22app.use('/', indexRouter); 23app.use('/users', usersRouter); 24 25// catch 404 and forward to error handler 26app.use(function(req, res, next) { 27 next(createError(404)); 28}); 29 30// error handler 31app.use(function(err, req, res, next) { 32 // set locals, only providing error in development 33 res.locals.message = err.message; 34 res.locals.error = req.app.get('env') === 'development' ? err : {}; 35 36 // render the error page 37 res.status(err.status || 500); 38 res.render('error'); 39}); 40 41 42app.listen(8080); 43 44module.exports = app; 45
indexjs
1// const model = await cocoSsd.load(); 2var express = require('express'); 3var router = express.Router(); 4router.use(express.json()); 5router.use(express.urlencoded({extended:true})); 6 7//画像をアップロードする画面へ遷移 8router.get('/', function(req, res, next) { 9 res.sendfile("./public/index.html"); 10}); 11 12//クライアントからJSONが送られてくるところ 13router.post("/upload",function(req, res, next){ 14 console.log(req.body); 15 16 //以下、省略 17}); 18 19module.exports = router; 20
#####クライアントサイド
indexhtml
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <script 6 src="https://code.jquery.com/jquery-3.4.1.min.js" 7 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 8 crossorigin="anonymous"> 9 </script> 10 <title>画像のアップロード</title> 11</head> 12<body> 13 <h1> 14 画像のアップロード 15 </h1> 16 17 <!-- ファイル選択ボタン --> 18<div style="width: 500px"> 19 <form enctype="multipart/form-data" method="post"> 20 <input type="file" name="userfile" accept="image/*"> 21 </form> 22 </div> 23 24 <!-- サムネイル表示領域 --> 25 <canvas id="canvas" width="0" height="0"></canvas> 26 27 <!-- アップロード開始ボタン --> 28 <button class="btn btn-primary" id="upload">投稿</button> 29 30 <!-- 以下、javascript --> 31 <script type="text/javascript"> 32 $(function() { 33 var file = null; // 選択されるファイル 34 const THUMBNAIL_WIDTH = 640; // 画像リサイズ後の横の長さ 35 const THUMBNAIL_HEIGHT = 480; // 画像リサイズ後の縦の長さ 36 var base64; //Base64エンコードされたらこの変数に代入する 37 38 // ファイルが選択されたら 39 $('input[type=file]').change(function() { 40 41 // ファイルを取得 42 file = $(this).prop('files')[0]; 43 // 選択されたファイルが画像かどうか判定 44 if (file.type != 'image/jpeg' && file.type != 'image/png') { 45 // 画像でない場合は終了 46 file = null; 47 blob = null; 48 return; 49 } 50 51 // 画像をリサイズする 52 var image = new Image(); 53 var reader = new FileReader(); 54 reader.onload = function(e) { 55 image.onload = function() { 56 var width, height; 57 width = THUMBNAIL_WIDTH; 58 height = THUMBNAIL_HEIGHT; 59 // サムネ描画用canvasのサイズを定数で宣言した数値に変更 60 var canvas = $('#canvas') 61 .attr('width', THUMBNAIL_WIDTH) 62 .attr('height', THUMBNAIL_HEIGHT); 63 var ctx = canvas[0].getContext('2d'); 64 // canvasに既に描画されている画像をクリア 65 ctx.clearRect(0,0,THUMBNAIL_WIDTH,THUMBNAIL_HEIGHT); 66 // canvasにサムネイルを描画 67 ctx.drawImage(image,0,0,image.THUMBNAIL_WIDTH,image.THUMBNAIL_HEIGHT,0,0,THUMBNAIL_WIDTH,THUMBNAIL_HEIGHT); 68 69 // canvasからbase64画像データを取得 70 base64 = canvas.get(0).toDataURL('image/jpeg'); 71 console.log(base64); //テスト用 72 } 73 image.src = e.target.result; 74 } 75 reader.readAsDataURL(file); 76 }); 77 78 79 // アップロード開始ボタンがクリックされたら 80 $('#upload').click(function(){ 81 82 $.ajax({ 83 url: "http://localhost:8080/upload", // 送信先 84 type: 'POST', 85 dataType: 'json', 86 data: { 87 "src" : base64, 88 }, 89 processData: false, 90 contentType: false 91 }) 92 .done(function( data, textStatus, jqXHR ) { 93 // 送信成功 94 }) 95 .fail(function( jqXHR, textStatus, errorThrown ) { 96 // 送信失敗 97 }); 98 99 }); 100 101 }); 102 </script> 103</body> 104</html>
JSONを受け取るにはどうしたらよいでしょうか。
よろしくお願いします。
補足情報（FW/ツールのバージョンなど）
Node.js v12.13.0
npm v6.12.0
Express v4.16.1
使用ブラウザ：GoogleChrome
回答2件
0
自己解決
送られてきているはずのJSONが送られてきていないということで、原因はクライアント側にあると考え、クライアント側を調査したところ、原因がわかりました。
###原因
######修正前のコード
一部抜粋
indexhtml
1$.ajax({ 2 url: "http://localhost:8080/upload", // 送信先 3 type: 'POST', 4 dataType: 'json', 5 data: {"src" : base64}, 6 processData : false, 7 contentType : false, 8 })
$.ajax()のオプションでprocessDataおよびcontentTypeをfalseに設定していたことが悪かったみたいです。
processDataについて
デフォルトでは、dataオプションにオブジェクトとして渡されるデータ(厳密に言えば、文字列以外のもの)は、 デフォルトのcontent-typeである"application/x-www-form-urlencoded"に合わせた形式でクエリー文字列へ変換されます。 もしDOMDocument、またはその他の形式のデータを送信したい場合は、このオプションをfalseに設定します。
引用元
JSON以外で送りたい！って時にfalseに設定するといいみたいです（そのまんまですね）
content-typeについて
型：
String初期値：application/x-www-form-urlencoded; charset=UTF-8
サーバーへデータが送信される際に、ここで指定されたコンテンツタイプが指定されます。 デフォルトは、"application/x-www-form-urlencoded; charset=UTF-8"で、 ほとんどのケースは、これで問題ありません。 もし明示的にcontent-typeを$.ajax()へ渡すと、常にそれがサーバーへ送信されます。(データが送信されない場合でも) W3CのXMLHttpRequestの仕様では、charsetは常にUTF-8であることが指示されており、 その他のcharsetをブラウザにエンコーディングを変更させることを強制しません。(翻訳に自信なし)
引用元
この種類で送信するで！ってことなんでしょうか...よくわかりませんがJSONを送りたいというときは、初期値の設定でよさそうです。
######修正後のソースコード
一部抜粋
indexhtml
1 $.ajax({ 2 url: "http://localhost:8080/upload", // 送信先 3 type: 'POST', 4 dataType: 'json', 5 data: {"src" : base64}, 6 })
すっきりしたコードになりました＾＾
やっぱりコードのコピペって駄目っすね。ちゃんと理解しないと。
回答していただいた方、ありがとうございました～！
投稿2019/11/23 02:38
編集2019/11/23 02:40
総合スコア4
0
気づいた点は２点（いずれもクライアント側）です。
1. CanvasRenderingContext2D.drawImage（）
コード内 canvasにサムネイルを描画 とコメントされている ctx.drawImage() の引数指定
- image.THUMBNAIL_WIDTH // => image.width ?
- image.THUMBNAIL_HEIGHT // => image.height ?
undefined の場合は imageサイズのようなので、大した問題ではないですが。
2. $.ajax() のオプション
JSONを受け取るにはどうしたらよいでしょうか。
JSONが正しいノーテーションのテキストデータとして送信できていないかもしれません。
このため、express.json() が解析に失敗しているのでは？
javascript
1$.ajax({ 2 3 /* omitted */ 4 5 // オブジェクトだと form-urlencoded の型に変換される？ 6 data: JSON.stringify({src:base64}), 7 8 /* omitted */ 9 10});
投稿2019/11/22 08:21
総合スコア5432
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。