web-dev-qa-db-ja.com

POSTファイルとフォームデータVue + axios

Vuejsコンポーネントのメソッドがあります。

_async submit () {
        if (this.$refs.form.validate()) {
          let formData = new FormData()
          formData.append('userImage', this.avatarFile, this.avatarFile.name)
          this.avatarFile = formData
          try {
            let response = await this.$axios.post('http://localhost:3003/api/test.php', {
              avatar: this.avatarFile,
              name: this.name,
              gender: this.gender,
              dob: this.DOB,
            }, {
              headers: {
                'Content-Type': 'multipart/form-data; boundary=' + formData._boundary
              }
            })
            if (response.status === 200 && response.data.status === 'success') {
              console.log(this.response)
            }
          } catch (e) {
           console.log(e)
          }
        }
      }
_

そして、_test.php_では、json_decode(file_get_contents("php://input"), TRUE);を使用して、データを_$_POST_変数として読み取ります。

name、gender、dobを正しく読み取ることはできますが、avatarを正しくフェッチできません。

同じための解決策はありますか？

注：14を超える変数を処理する予定なので、すべての変数をformData.append(.., ..)として追加する必要はありません。

モデレーターへのメモ：formDataが他のデータオブジェクトと共に使用されている場所については、質問は見つかりませんでした。

phpvue.jsvue-componentaxiosnuxt.js
7
Dev Aggarwal

だから、私はこれをもっと簡単な方法で理解しました：

    let rawData = {
                name: this.name,
                gender: this.gender,
                dob: this.dob
              }
              rawData = JSON.stringify(rawData)
    let formData = new FormData()
          formData.append('avatar', this.avatarFile, this.avatarFile.name)
          formData.append('data', rawData)
    try {
            let response = await this.$axios.post('http://localhost:3003/api/test.php', formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
         })

test.php：

$_POST = json_decode($_POST['data'],true);

注：使用するオプションがありました：

Object.keys(rawData).map(e => {
            formData.append(e, rawData[e])
          })

ネストされたオブジェクトを扱っていたので(name: { first: '', last: ''} ) rawDataでは、クライアント側またはサーバー側のいずれかで再帰的なメソッドが必要になるため、これを行わないことを選択しました。

7
Dev Aggarwal

[〜＃〜] php [〜＃〜]（process.php）

<?php
    $data = array(
        "post"  => $_POST,
        "files" => $_FILES
    );

    echo json_encode($data);
?>

Vue and form HTML

let vm = new Vue({
    el: "#myApp",
    data: {
        form: {}
    },
    methods: {
        submit: async function (e) {
            e.preventDefault();

            /* formData */
            var formData = new FormData( this.$refs.formHTML );

            /* AJAX request */
            await axios({
                method: "post",
                url: "process.php",

                data: formData,

                config: { headers: { "Content-Type": "multipart/form-data" } }
            })

            /* handle success */
            .then( response => { console.log(response.data); } )

            /* handle error */
            .catch( response => { console.log(response) } );
        }
    }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>

<div id="myApp" >

    <form @submit="submit" ref="formHTML" >

        Name: <input type="text" name="name" v-model="form.name" /><br />

        Gender:
        <input type="radio" name="gender" value="male" v-model="form.gender" /> Male
        <input type="radio" name="gender" value="female" v-model="form.gender" /> Female <br />

        File: <input type="file" name="upload" v-model="form.upload" /><hr />

        <input type="submit" name="submit" value="Submit" />

    </form>

</div>
0
antelove