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

【问题标题】：Unable to access uploaded files from axios request to laravel无法从 axios 请求访问上传的文件到 laravel
【发布时间】：2020-05-17 17:34:08
【问题描述】：

我正在为一个项目构建课程部分，其中一个部分中的多个讲座可以有多个文件。我无法将文件发送到 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 发布请求

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 开发工具

Laravel 控制器

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]
        )

)

我无法在 [Object File] 中查看文件信息。

【问题讨论】：

你是如何访问 laravel 中的文件的？
你试过使用 $request->allFiles() 吗？
$data = $request->all(); @KevinBui $request->allFiles() 返回空数组 [].

标签： javascript php laravel vue.js axios

【解决方案1】：

以下两种方法更改后得到解决方案。

在 Vue 数据对象中添加了form: new FormData。

文件选择

onFilesSelect(event, lec_index){
            let files_count = event.target.files.length;
            var files_data = [];
            for(let i = 0;i<files_count;i++){
                files_data.push(event.target.files[i]);
            }
            Vue.set(this.selected_files, lec_index, files_data);
        },

文件上传

files_store(){
 for(let i = 0; i< this.selected_files.length; i++){
                    for (let j = 0; j < this.selected_files[i].length; j++) {
                        this.form.append('files['+ i +']['+ j +']', this.selected_files[i][j]);
    }
}

【讨论】：