无法访问从 axios 请求到 laravel 的上传文件

Question

我正在为一个项目构建课程部分，其中一个部分中的多个讲座可以有多个文件。我无法将文件发送到Laravel控制器。

Vue 表单

<input type="file" id="files" name="files[]" ref="resources" multiple @change="onFilesSelect($event, lec_index)">

方法

onFilesSelect(event, lec_index){

            let files_count = event.target.files.length;

            var files_data = [];

            for(let i = 0;i<files_count;i++){

                files_data[i] = event.target.files[i];

            }

            Vue.set(this.selected_files, lec_index, files_data);

            //this.course_files = this.$refs.resources.files;

        },

表单数据

let formData = new FormData();

            var selected_files_count = this.selected_files.length;

            for(let j=0;j<selected_files_count;j++){

                let resources = this.selected_files[j];

                formData.append('files['+ j +']', resources);

            }

Axios post request

const id = this.current_course_id;

            const url = `/create-curriculum/${id}`;

            //const url = 'course-uploadfile';

            axios.post(url, formData,{

                headers: {

                    'Content-Type': 'multipart/form-data'

                    }

                })

                .then(response=>{

                    console.log(response);

                })

                .catch(error=>{

                    console.log(error);

                });

显示文件的 Vue 开发工具

拉拉维尔控制器

public function create_curriculum(Request $request, $id){

        $data = $request->all();

        print_r($data);

}

输出

Array

(

    [files] => Array

        (

            [0] => [object File],[object File]

            [1] => [object File],[object File]

        )

)

我无法在 [对象文件] 中查看文件信息。

Answer 1

在两种方法进行以下更改后得到了解决方案。在 Vue 数据对象中添加。form: new FormData在文件上，选择onFilesSelect(event, lec_index){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let files_count = event.target.files.length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var files_data = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(let i = 0;i<files_count;i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; files_data.push(event.target.files[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Vue.set(this.selected_files, lec_index, files_data);&nbsp; &nbsp; &nbsp; &nbsp; },文件上传时files_store(){&nbsp;for(let i = 0; i< this.selected_files.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let j = 0; j < this.selected_files[i].length; j++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.form.append('files['+ i +']['+ j +']', this.selected_files[i][j]);&nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;