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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CodeIgniter

CodeIgniterは、PHP向けオープンソースのWebアプリケーションフレームワークです。CodeIgniterは覚える構文が少なく、自由度も高いため、PHPを理解していれば構築が簡単です。

Q&A

解決済

2回答

2530閲覧

ファイルを含むPOST値を受け取る方法

SystemAjisai

総合スコア171

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CodeIgniter

CodeIgniterは、PHP向けオープンソースのWebアプリケーションフレームワークです。CodeIgniterは覚える構文が少なく、自由度も高いため、PHPを理解していれば構築が簡単です。

0グッド

0クリップ

投稿2019/09/17 06:28

前提・実現したいこと

画面側(Nuxt.js)からサーバー側(CodeIgniter)にファイルとテキストボックスの値をPOSTしたいです。

最終的な環境はNuxt.jsとCodeIgniterが別々のサーバーで動きます。
今試しているのは開発環境で同じPC上で動いていますがポートが違います。

POSTする値にファイルが含まれるとサーバー側でテキストボックスの値も受け取れなくなる状態です。
どなたかご存知の方、アドバイス頂けたら幸いです。

発生している問題・エラーメッセージ

POST値にファイルが含まれるとサーバーで値を受け取れない
※下記該当のソースの「取得できるかの実験」のところでデバッグで確認しても値が取れていません。

該当のソースコード

(画面側)

javascript

1<template> 2 <div> 3 <el-form ref="form" :model="form" label-width="120px"> 4 <el-form-item label="年月"> 5 <el-date-picker 6 name="ym" 7 v-model="form.ym" 8 type="month" 9 placeholder="Pick a month"> 10 </el-date-picker> 11 </el-form-item> 12 <el-form-item label="ファイル"> 13 <input type="file" @change="selectedFile" name="uploadFile" /> 14 </el-form-item> 15 <el-form-item> 16 <div class="button-wrapper-mint" @click="upload"> 17 保存 18 </div> 19 </el-form-item> 20 </el-form> 21 </div> 22</template> 23<script> 24export default { 25 data(){ 26 return { 27 form: { 28 ym: "", 29 uploadFile: null, 30 } 31 } 32 }, 33 methods:{ 34 selectedFile(e) { 35 e.preventDefault(); 36 let files = e.target.files; 37 this.form.uploadFile = files[0]; 38 }, 39 upload(){ 40 let config = { 41 headers: {'content-type': 'multipart/form-data'} 42 }; 43 let formData = new FormData(); 44 formData.append('ym', this.form.ym); 45 formData.append('uploadFile', this.form.uploadFile); 46 this.$axios.post( 47 "http://~~~", 48 formData, 49 config 50 ).then((response) =>{ 51 console.log(response); 52 }); 53 } 54 }, 55} 56</script>

送信した時のForm Dataの中身(Chromeの開発者ツールから取得)
イメージ説明

(サーバー側)

php

1 public function upload(){ 2 header('Access-Control-Allow-Origin: *'); 3 $method = $this->input->server('REQUEST_METHOD'); 4 if($method == "OPTIONS"){ 5 $this->output->set_content_type('application/json')->set_output(json_encode(array( 6 "status" => "OK", 7 ))); 8 return; 9 } 10 if($method != "POST"){ 11 return; 12 } 13 14 // 取得できるかの実験 --------------------- 15 $ym= $this->input->get_post('ym', TRUE) ?: ""; 16 $_POST; 17 $data = json_decode(file_get_contents("php://input"), TRUE); 18 // ----------------------------------- 19 20 $config = array( 21 'upload_path' => './upload', 22 'overwrite' => TRUE, 23 'allowed_types' => '*', 24 'file_name' => date('YmdHis').".csv", 25 ); 26 $this->load->library('upload', $config); 27 28 if ( ! $this->upload->do_upload("uploadFile")) { 29 $error = array('error' => $this->upload->display_errors()); 30 $this->output->set_content_type('application/json')->set_output(json_encode(array( 31 "status" => "NG", 32 "error" => $error // ☆<p>You did not select a file to upload.</p> 33 ))); 34 } else { 35 $this->output->set_content_type('application/json')->set_output(json_encode(array( 36 "status" => "OK", 37 ))); 38 } 39 }

※デバッグで確認すると取得できるかの実験のところが3つとも空になります。
※☆の所の$errorには<p>You did not select a file to upload.</p>が入っていました。

試したこと

1. ソースを変えずに、画面でファイルを未選択で送信
ymの値は取得できた

**2. axiosを使わずにformで送信 **

javascript

1<template> 2 <div class="padding-box"> 3 <form method="POST" action="(URL)" enctype="multipart/form-data"> 4 <el-date-picker 5 name="ym" 6 v-model="form.ym" 7 type="month" 8 placeholder="Pick a month"> 9 </el-date-picker> 10 <input type="file" name="uploadFile" /> 11 <input type="submit" value="保存" /> 12 </form> 13 </div> 14</template>

⇒同じ状態(サーバー側でデータが取得できない)

3. 同じポートで動かしてみる
同じlocalhostでもポートが違うとCORSエラーが発生したので、Access-Control-Allow-Origin以外に設定がいるのか切り分けるため、Nuxt.jsをgenerateしたものをPHPを動かしているApacheで動かしてみましたが結果は同じでした。。。

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

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

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

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

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

guest

回答2

0

multipartで送ってpostデータは$_POST(もしくはfilter_inputのINPUT_POST)で参照し
ファイルは$_FILESを参照してください

PHP

1<?PHP 2print_r($_POST); 3print_r($_FILES); 4?> 5<form method="post" enctype="multipart/form-data"> 6<input type="text" name="hoge" value="123"><br> 7<input type="file" name="fuga"><br> 8<input type="submit" value="send"> 9</form>

fetch

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelector('form').addEventListener('submit',e=>{ 4 e.preventDefault(); 5 const url="send.php"; 6 const method = "POST"; 7 /* 8 const headers = {'Content-Type': 'multipart/form-data'}; //うまく渡らない 9 */ 10 const headers = {}; 11 const body=new FormData(e.target); 12 fetch(url,{method, headers, body}).then(res=>res.text()).then(console.log); 13 }); 14}); 15</script> 16<form method="post" enctype="multipart/form-data"> 17<input type="text" name="hoge" value="123"><br> 18<input type="file" name="fuga"><br> 19<input type="submit" value="send"> 20</form>
  • send.php

PHP

1<?PHP 2print_r($_POST); 3print_r($_FILES); 4?>

投稿2019/09/17 06:41

編集2019/09/17 08:08
yambejp

総合スコア114572

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

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

SystemAjisai

2019/09/17 07:38

回答ありがとうございます。 formの時はformに「enctype="multipart/form-data"」、axiosの時は「{headers: {'content-type': 'multipart/form-data'}}」をpostの第三引数に渡しているのでmultipartで送ったことになっているという認識です。。。他に何か必要でしょうか?
yambejp

2019/09/17 08:07

axiosの仕様がよくわからないのですが、fetchだとcontent-typeとか指定すると データ受け渡しがうまくいかないので、headersを省略してみては?
SystemAjisai

2019/09/17 12:17

アドバイス頂いたことも含めて色々試してみても状況が変わらなかったのですが、ダメ元で同じプログラムを開発環境ではないパソコンに入れて動かしてみたらアップロードできてしまいました。 開発環境と動いた環境のリクエストヘッダーを比べてみたら、開発環境だけ「Sec-Fetch-Mode:cors」「Sec-Fetch-Site: same-origin」と出ていました。 これが何かは調べている最中ですが、そもそもソースの問題じゃないのかもしれません。 アドバイス頂いたのにすみません。。。
guest

0

自己解決

原因はphp.iniのpost_max_sizeでした。
画面上にエラー等が出る設定にしているので疑いもしませんでしたが、レスポンスjsonだから画面がない・・・。

プログラムを別のサーバーで動かしたら正常に動いたことから、プログラムが原因じゃないかもしれないと疑い始めて、片っ端から設定ファイル的なものを見比べていて発見しました。
質問に散々ソースを載せたのにすみません。。。

投稿2019/09/18 08:08

SystemAjisai

総合スコア171

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問