文件对象被推到数组时变成字符串？ JS

Question

我的目标是将多个文件从Vue.js前端上传到php / Laravel后端。

这是我收集文件的地方

<input id="cover-file" @change="onCoverSelected" type="file" multiple>

这是onCoverSelected方法：

  onCoverSelected(e) {
    let files = e.target.files;
    // let fileArray = Object.values(files);
    for (var i = 0; i < files.length; i++) {
      console.log(files[1]);
      this.covers.push(files[1]);
    }
  },

当我console.log个文件时，它们在DevTools控制台中显示为实际文件。到目前为止一切顺利。

但是，当我将文件推入数组时，它们变成了字符串！我不明白为什么。我的后端依赖于接收文件对象数组。

这是DevTools的屏幕截图，其中显示了File对象变为字符串

这是从后端希望接收文件对象数组的地方，但是，当我dd covers变量时，我会收到一个空数组：

$covers = (array)json_decode($request->input('covers'));
dd($covers);

不使用(array)打印以下内容：

"[object File],[object File],[object File]"

如何在后端接收File对象的数组？谢谢。

Answer 1

不幸的是，File是一个对象，代表文件的二进制信息。问题不是将它们推入数组，而是将其转换为JSON时的问题：它将尝试将File对象转换为字符串。在这种情况下，它不能将二进制表示为字符串，因此File只是转换为=> [object File]。

您的2个选项是：

1. 以多部分形式提交POST数据。

2. 将文件转换为base64字符串或other similar methods。 （可以在服务器端极大地影响性能，编码然后解码）

请参见另一个相关主题here。