VueJs 和 Laravel。我无法使用 Vuejs 和 FileReader 发送 excel 文件

Question

我想加载一个 excel 文件以将其与 axios 一起发送到 Controller 和 Maatwebsite\Excel 以进行导入。

当我从刀片使用 Php 时，控制器中的导入部分正在工作，从我的 Vuejs 组件发送时出现问题。我无法读取 Excel 文件。或者也许我无法在 Controller 中阅读它。

这是我的代码：

<template>
  <input type="file"  @change="checkFile" />
  <button @click="importExcel()">Import File</button>
</template>

<script>
//In method 
  checkFile(e) {
    var files = e.target.files || e.dataTransfer.files;
    console.log('#', files); // The file is in console
    if (!files.length)
    return;
    this.createFile(files[0]);
  },

createFile(file) {
  var reader = new FileReader();
  var vm = this;
  reader.readAsDataURL(file)
  vm.ex.excel=file; // my ex.excel object contain File
 },

importExcel: function () {
    var formData = new FormData();
    formData.append("file", this.ex.excel);
    axios.post('/importExcel', formData)
          },  

</script>

所以在Controller中，我在使用php（工作）时使用此代码

public function importExcel(Request $request)
{
    if($request->hasFile('import_file')){
       Excel::import(new UsersImport, request()->file('import_file'));
    }
    return back();
}

当我为 axios 尝试此代码时。我有一个错误：

public function importExcel(Request $request)
{
    Excel::import(new UsersImport, $request->excel);
    return back();
}

错误：无法检测到 ReaderType 或 WriterType

console.log(file) in image

更新：在我添加的控制器中

$a = $request->excel;
dd($a);
result in : null

Answer 1

<template>
  <input type="file" ref="file"  @change="checkFile" />
  <button @click="importExcel()">Import File</button>
</template>

<script>
//In method 
{
  ...

  createFile(file) {
    this.ex.excel = this.$refs.file.target.value.files[0]
  }
  ...
  }
</script>

<?php

...
public function importExcel(Request $request)
{
    Excel::import(new UsersImport, $request->file('file'));
    return back();
}
...

Answer 2

看起来 mime-type 丢失了，尝试将 mime-type 与您的 HTTP POST 一起添加 ...