php - FormData() 没有按预期工作 - Laravel/Vue 文件上传

Question

我正在尝试使用 VueJS 和 Laravel 设置多个文件上传。

我遇到了一个问题，在使用FormData()和添加文件时，会用完 2 个空格。

考虑以下 VueJS 方法

uploadFiles: function(){
    let formData = new FormData();
    this.inputs.forEach((input, index) => {
        formData.append('uploads[1][]', 'something big')
        formData.append('uploads[1][]', 'something else');

        formData.append('uploads[2][]', input.file);
        formData.append('uploads[2][]', 'something 1')
        formData.append('uploads[2][]', 'something 2')
        formData.append('uploads[2][]', 'something 3');
        formData.append('uploads[2][]', 'something 4');
    });
    const headers = {headers: {'Content-Type': 'multipart/form-data'}}
    axios.post( '/upload-multiple',formData,headers)
    .then(function(){
        console.log('SUCCESS!!');
    })
    .catch(function(){
        console.log('FAILURE!!');
    });
},

接收请求的 Laravel 方法

public function multiple(Request $request)
{
  dd($request->all());
}

当我运行 AJAX 请求时，这就是我得到的响应

array:1 [
  "uploads" => array:2 [
    1 => array:2 [
      0 => "something big"
      1 => "something else"
    ]
    2 => array:5 [
      0 => "null"
      1 => "something 1"
      2 => "something 2"
      3 => "something 3"
      4 => "something 4"
    ]
  ]
]

这正是我所期望的，第二个数组中的第一个值为空，因为我还没有选择过一个文件。

但是，如果我现在选择一个文件并提交请求，这就是我得到的

array:1 [
  "uploads" => array:2 [
    1 => array:2 [
      0 => "something big"
      1 => "something else"
    ]
    2 => array:4 [
      0 => UploadedFile {#457
        -test: false
        -originalName: "30_flash_sale_desktop.jpg"
        -mimeType: "image/jpeg"
        -error: 0
        #hashName: null
        path: "/tmp"
        filename: "php15pIms"
        basename: "php15pIms"
        pathname: "/tmp/php15pIms"
        extension: ""
        realPath: "/tmp/php15pIms"
        aTime: 2019-12-10 10:21:02
        mTime: 2019-12-10 10:21:02
        cTime: 2019-12-10 10:21:02
        inode: 265696
        size: 334749
        perms: 0100600
        owner: 1000
        group: 1000
        type: "file"
        writable: true
        readable: true
        executable: false
        file: true
        dir: false
        link: false
      }
      1 => "something 2"
      2 => "something 3"
      3 => "something 4"
    ]
  ]
]

如果你仔细观察，你会发现"something 1"已经消失了。

重新排序formData.append()'s似乎没有什么不同。

为什么添加文件总是使第一个附加文本消失？

更新 这是有效载荷的屏幕截图（重新排序后查看是否有所不同）

更新 2

我找到了一个变通的解决方案，但它并没有首先解释导致实际问题的原因。如果我对密钥进行硬编码，那么所有数据都会按预期通过。

formData.append('uploads[2][0]', input.file);
formData.append('uploads[2][1]', 'something 1')
formData.append('uploads[2][2]', 'something 2')
formData.append('uploads[2][3]', 'something 3');
formData.append('uploads[2][4]', 'something 4');

有趣的是，当查看响应时，尽管文件对象位于 position ，但它仍排在第 5 位[0]。

array:1 [
  "uploads" => array:1 [
    2 => array:5 [
      1 => "something 1"
      2 => "something 2"
      3 => "something 3"
      4 => "something 4"
      0 => UploadedFile {#457
        -test: false
        -originalName: "Screenshot 2019-12-10 at 12.20.07.png"
        -mimeType: "image/png"
        -error: 0
        #hashName: null
        path: "/tmp"
        filename: "phpTkwuKI"
        basename: "phpTkwuKI"
        pathname: "/tmp/phpTkwuKI"
        extension: ""
        realPath: "/tmp/phpTkwuKI"
        aTime: 2019-12-11 09:47:05
        mTime: 2019-12-11 09:47:05
        cTime: 2019-12-11 09:47:05
        inode: 265716
        size: 92571
        perms: 0100600
        owner: 1000
        group: 1000
        type: "file"
        writable: true
        readable: true
        executable: false
        file: true
        dir: false
        link: false
      }
    ]
  ]
]

更新 3

我只能假设这是 LaravelRequest课程的问题，因为其他人已经能够重现这个问题。

标签： phpajaxlaravelvue.js