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

Question

前提・実現したいこと

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

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

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

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

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

該当のソースコード

(画面側）

<template>
    <div>
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="年月">
                <el-date-picker 
                    name="ym"
                    v-model="form.ym"
                    type="month"
                    placeholder="Pick a month">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="ファイル">
                <input type="file" @change="selectedFile" name="uploadFile" />
            </el-form-item>
            <el-form-item>
                <div class="button-wrapper-mint" @click="upload">
                    保存
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  data(){
    return {
        form: {
            ym: "",
            uploadFile: null,
        }
    }
  },
  methods:{ 
    selectedFile(e) {
        e.preventDefault();
        let files = e.target.files;
        this.form.uploadFile = files[0];
    },
    upload(){
        let config = {
            headers: {'content-type': 'multipart/form-data'}
        };
        let formData = new FormData();
        formData.append('ym', this.form.ym);
        formData.append('uploadFile', this.form.uploadFile);
        this.$axios.post(
            "http://～～～",
            formData,
            config
        ).then((response) =>{
            console.log(response);
        });
    }
  },
}
</script>

送信した時のForm Dataの中身（Chromeの開発者ツールから取得）

（サーバー側）

 public function upload(){
    header('Access-Control-Allow-Origin: *');
    $method = $this->input->server('REQUEST_METHOD');
    if($method == "OPTIONS"){
      $this->output->set_content_type('application/json')->set_output(json_encode(array(
        "status" => "OK",
      )));
      return;
    }
    if($method != "POST"){
      return;
    }

    // 取得できるかの実験 ---------------------
    $ym= $this->input->get_post('ym', TRUE) ?: "";
    $_POST;
    $data = json_decode(file_get_contents("php://input"), TRUE);
    // -----------------------------------

    $config = array(
      'upload_path' => './upload',
      'overwrite' => TRUE,
      'allowed_types' => '*',
      'file_name' => date('YmdHis').".csv",
    );
    $this->load->library('upload', $config);

    if ( ! $this->upload->do_upload("uploadFile")) {
      $error = array('error' => $this->upload->display_errors());
      $this->output->set_content_type('application/json')->set_output(json_encode(array(
        "status" => "NG",
        "error" => $error // ☆<p>You did not select a file to upload.</p>
      )));
    } else {
      $this->output->set_content_type('application/json')->set_output(json_encode(array(
        "status" => "OK",
      )));
    }
  }

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

試したこと

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

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

<template>
    <div class="padding-box">
        <form method="POST" action="（URL）" enctype="multipart/form-data">
                <el-date-picker 
                    name="ym"
                    v-model="form.ym"
                    type="month"
                    placeholder="Pick a month">
                </el-date-picker>
                <input type="file" name="uploadFile" />
                <input type="submit" value="保存" />
        </form>
    </div>
</template>

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

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

Answer 1

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

<?PHP
print_r($_POST);
print_r($_FILES);
?>
<form method="post" enctype="multipart/form-data">
<input type="text" name="hoge" value="123"><br>
<input type="file" name="fuga"><br>
<input type="submit" value="send">
</form>

fetch

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('form').addEventListener('submit',e=>{
    e.preventDefault();
    const url="send.php";
    const method = "POST";
    /*
    const headers = {'Content-Type': 'multipart/form-data'}; //うまく渡らない
    */
    const headers = {};
    const body=new FormData(e.target);
    fetch(url,{method, headers, body}).then(res=>res.text()).then(console.log);
  });
});
</script>
<form method="post" enctype="multipart/form-data">
<input type="text" name="hoge" value="123"><br>
<input type="file" name="fuga"><br>
<input type="submit" value="send">
</form>

• send.php

<?PHP
print_r($_POST);
print_r($_FILES);
?>

Comments

[SystemAjisai]

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

[yambejp]

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

[SystemAjisai]

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

Answer 2

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

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