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

这正是我所期望的，考虑到我从未选择过文件，第二个数组中的第一个值为null。

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

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');

有趣的是，当查看响应时，尽管文件对象位于[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

我只能假定这是Laravel的Request类存在的问题，因为其他人已经能够重现此问题。

FormData（）无法正常工作-Laravel / Vue文件上传

0 个答案: