javascript - 推送到数组时文件对象变成字符串？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 对象变成了一个字符串

这是来自我的后端，我希望收到一个 File 对象数组，但是，当我输入变量时，我收到一个空数组：ddcovers

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

不使用以下(array)打印件：

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

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

标签： javascriptphparraysjson

Answer 1

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

您的 2 个选项是：

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

2. 将文件转换为 base64 字符串，或其他类似方法。（可以极大地影响服务器端的性能、编码和解码）

在此处查看另一个相关线程。