Php 如何使用Axios将图像从VueJS上载到Symfony？

我在使用Symfony 4的项目中安装了VueJS组件，没有问题，但目前我想上传一个图像。我遵循拉威尔的这一说法：

我访问了控制器，但在那里，base 64中的值不能仅到达控制台消息

代码：

---

答案是

null

我的疑问是如何将图像上传到本地服务器。

您将文件内容作为

avatar

变量发送，为什么要尝试获取请求的

数据

正确的形式是：

$avatar = $request->file('avatar');

此外，您还可以省略添加
\u方法：“POST”
以发送数据，因为您已经在执行
axios.POST
。
根据所示的注释，我可以看到标头丢失，然后在Symfony中以已定义的相同路径收集数据

模板文件如下所示：

//CargaFoto.vue
<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
      <div class="container">
            <div class="large-12 medium-12 small-12 cell">
                <label>File
                    <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
                </label>
                <button v-on:click="submitFile()">Submit</button>
            </div>
        </div>

        </div>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "CargaFoto",
        data() {
            return {
                msg: "Cargar Imagen de Perfil",
                file: ''
                //selectedFile: null
            };
        },
        methods: {
            submitFile(){
                /*
                        Initialize the form data
                    */
                let formData = new FormData();

                /*
                    Add the form data we need to submit
                */
                formData.append('file', this.file);

                /*
                  Make the request to the POST /single-file URL
                */
                axios.post( '/usuario/jsonimagen',
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(function(){
                    console.log('SUCCESS!!');
                })
                    .catch(function(){
                        console.log('FAILURE!!');
                    });
            },

            /*
              Handles a change on the file upload
            */
            handleFileUpload(){
                this.file = this.$refs.file.files[0];
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    #fileInput {
        display: none;
    }
    h1,
    h2 {
        font-weight: normal;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
    .my-8 {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
</style>

还要配置将图像加载到文件中的路径

//services.yaml
parameters:
    locale: 'en'
    usuarios_directorio: '%kernel.project_dir%/public/uploads/usuarios'

在这里，您可以看到此捕获中加载的图像

您好，谢谢您的回答，但错误仍然存在，结果为空：“试图调用一个名为“file”的未定义方法，该方法属于类“Symfony\Component\HttpFoundation\Request”。@juanitourquiza，你的
Request
应该是
illighted\Http\Request
看看这里：谢谢你的回答，但我用的是symfony而不是laravel。我已经收集了数据，但是我在临时文件夹中有它们。你让我困惑了，我以为你在使用Laravel。
//CargaFoto.vue
<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
      <div class="container">
            <div class="large-12 medium-12 small-12 cell">
                <label>File
                    <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
                </label>
                <button v-on:click="submitFile()">Submit</button>
            </div>
        </div>

        </div>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "CargaFoto",
        data() {
            return {
                msg: "Cargar Imagen de Perfil",
                file: ''
                //selectedFile: null
            };
        },
        methods: {
            submitFile(){
                /*
                        Initialize the form data
                    */
                let formData = new FormData();

                /*
                    Add the form data we need to submit
                */
                formData.append('file', this.file);

                /*
                  Make the request to the POST /single-file URL
                */
                axios.post( '/usuario/jsonimagen',
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(function(){
                    console.log('SUCCESS!!');
                })
                    .catch(function(){
                        console.log('FAILURE!!');
                    });
            },

            /*
              Handles a change on the file upload
            */
            handleFileUpload(){
                this.file = this.$refs.file.files[0];
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    #fileInput {
        display: none;
    }
    h1,
    h2 {
        font-weight: normal;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
    .my-8 {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
</style>

//src/UsuarioController.php
/**
 * @return JsonResponse
 * @Route("/jsonimagen", name="jsonimagen", methods="POST")

 */
public function jsonimagen(Request $request):JsonResponse
{
    $usuario = $this->getUser();
    $data = $request->files->get('file');
    $fileName = $usuario.'.'.$data->guessExtension();
    // moves the file to the directory where usuarios are stored
    $data->move(
        $this->getParameter('usuarios_directorio'),
        $fileName
    );
    echo $data; exit;
    return $this->json($data);
}

//services.yaml
parameters:
    locale: 'en'
    usuarios_directorio: '%kernel.project_dir%/public/uploads/usuarios'