Laravel Vue多个图像上传失败，每个图像都为NULL

问题描述

我正在尝试在Laravel中上传多个图像，但是，一个，我无法在HTML附带的上传对话框中上传多个图像，另外两个，在foreach之前的转储和模具测试中，我得到了NULL值。我是Laravel和Vue的新手，所以我确定这是一件简单的事情，但对于我的一生，我不知道自己缺少什么。首先，我正在web.PHP 文件中运行发布请求，但我不确定这是否是一个好主意。无论如何，我的脚本在甚至无法上传文件之前都会失败。这是我到目前为止的代码。

web.PHP

awk

app.js（我觉得没有任何关系的代码）

${var#pattern}      Strip shortest match of pattern from front of $var
${var##pattern}     Strip longest match of pattern from front of $var
${var%pattern}      Strip shortest match of pattern from back of $var
${var%%pattern}     Strip longest match of pattern from back of $var

FileUpload.vue

Route::post('/upload',function (Request $request) {
    $uploadedFiles = $request->pics;


    foreach ($uploadedFiles as $file) {
        dd($file);

        $file->store('dummy');
    }

    return response(['status' => 'success'],200);
});

Task.vue（全部。我不知道这里是否有什么引起冲突，所以我包括了所有内容。）

require("./bootstrap");
window.Vue = require("vue");

import { Form,HasError,AlertError } from "vform";

window.Form = Form;

Vue.component(HasError.name,HasError);
Vue.component(AlertError.name,AlertError);

import VueRouter from "vue-router";
Vue.use(VueRouter);

let routes = [
    {
        path: "/dashboard",component: require("./components/Dashboard.vue").default
    },{
        path: "/users",component: require("./components/Users.vue").default
    },{
        path: "/tasks",component: require("./components/Tasks.vue").default
    }
];

const router = new VueRouter({
    mode: "history",routes
});

Vue.component(
    "dashboard-component",require("./components/Dashboard.vue").default
);

Vue.component("file-upload",require("./components/FileUpload.vue").default);


const app = new Vue({
    el: "#app",router
});

在此方面的任何帮助将不胜感激。我正在尝试本地上传到我的sql服务器。在我的.env文件中，我指定FILESYstem_DRIVER = public指向该文件中预先指定的config / filesystem.PHP公共路由。

解决方法

这里有几个问题

您正在阻止ValueError上的 change 事件的默认事件操作。不要那样做从您的<input type="file">方法中删除此行
```
fieldChange
```

e.preventDefault()

Content-type标头还需要包含mime-boundary令牌。使用multipart/form-data时，浏览器会自动添加它们，因此您不应该手动设置它们。将您的Axios通话更改为
```
FormData
```
您正在向axios.post("/upload",this.formImage) // no config required添加文件数组。这不是您添加多个文件的方式。相反，您必须多次拨打FormData。在将数据数组发布到PHP时，字段名也应后缀append()
```
[]
```
请参见https://www.php.net/manual/features.file-upload.multiple.php
您的PHP代码应该在请求文件中寻找this.attachments.forEach(file => { this.formImage.append("task_image[]",file) })，而不是task_image
```
pics
```

laravel laravel multiple-file-upload vue.js