如何在 Vue 中使用 FormData() 上传文件

Question

所以我之前问过一个问题，就 logging 结果得到了一些帮助，但是我的结果没有意义。

所以我有一个输入

<input type="file" name="import_file" v-on:change="selectedFile($event)">

v-on:change将所选文件绑定到我的数据对象this.file

selectedFile(event) {
      this.file = event.target.files[0]
    },

然后我用这个方法提交文件

uploadTodos() {
  let formData = new FormData();
  formData.append('file', this.file);
  for(var pair of formData.entries()) {
    console.log(pair[0]+ ', '+ pair[1]); 
   }
   this.$store.dispatch('uploadTodos', formData);
 }

然而，当我提交时，formData 似乎没有附加数据，因为我的 logged 结果是这样的

file, [object File]

我不应该将我的实际数据附加到 formData 对象吗？

我参考了其他关于如何 post 的文章，但我没有得到想要的结果。

uploadTodos(context, file) {
      console.log(file)
      axios.post('/import', file,{ headers: {
        'Content-Type': 'multipart/form-data'
      }})
      .then(response => {
        console.log(response.data)
        context.commit('importTodos', response.data)
      })
      .catch(error => {
        console.log(error.response.data)
      })
    }

当我 console.log(file) formData 对象为空时

后端问题 所以我在后端 Laravel 的问题是 maatwebsite 包。我看到的是3.0版本还不支持导入。唯一建议的解决方法是安装 2.0 版？这仍然是唯一的解决方法吗？这是控制器方法

public function importExcel(Request $request) 
    {

        if (empty($request->file('file')->getRealPath())) {
            return back()->with('success','No file selected');
        }
        else {
        $path = $request->file('file')->getRealPath();
        $inserts = [];
        Excel::load($path,function($reader) use (&$inserts)
        {
            foreach ($reader->toArray() as $rows){
                foreach($rows as $row){
                    $inserts[] = ['user_id' => $row['user_id'], 'todo' => $row['todo']];
                };
            }
        });

        if (!empty($inserts)) {
            DB::table('todos')->insert($inserts);
            return back()->with('success','Inserted Record successfully');                  
        }


        return back();
        }

    }

3.0版本不支持的行是这个

Excel::load($path,function($reader) use (&$inserts)

Answer 1

我已经复制了你的代码，它似乎工作正常

when I console.log(file) the formData object is empty

是的，当您使用控制台时，输出应该是一个空对象，这就是 javascript 的工作方式。

将输出转换为数组后，我得到下图中的输出：

const store = new Vuex.Store({
  actions: {
    uploadTodos(context, file) {
      console.log([...file])
      axios.post('/import', file,{ headers: {
        'Content-Type': 'multipart/form-data'
      }})
      .then(response => {
        console.log(response.data)
        context.commit('importTodos', response.data)
      })
      .catch(error => {
        console.log(error.response.data)
      })
    }
  }
})

const app = new Vue({
 store,
  data: {
   file: null
  },
  methods: {
   selectedFile(event) {
       console.log(event);
         this.file = event.target.files[0]
       },
    uploadTodos() {
    let formData = new FormData();
    formData.append('file', this.file);
    for(var pair of formData.entries()) {
      console.log(pair[0]+ ', '+ pair[1]); 
     }
     this.$store.dispatch('uploadTodos', formData);
   }
  },
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <input type="file" name="import_file" @change="selectedFile($event)">
  <button @click="uploadTodos">
   Submit 
  </button>
</div>

Answer 2

这 post 回答了问题的第二部分。起初我读到 maatwebsite/excel 3.0 版 不支持导入。但是，我使用的是支持导入的 3.1.0 版。但是导入方法还是不支持Excel::load()。您应该改为使用 Excel::import() 并遵循给定的参数传递规则。当然可以修改哪个以满足您的需要。但无论如何，这是一个简单的例子，说明我如何为任何感兴趣的人使用它。

首先为任何模型创建导入文件。对我来说是 Todos。

<?php

namespace App\Imports;

use App\Todo;

use Maatwebsite\Excel\Concerns\ToModel;

class TodoImport implements ToModel
{
    /**
    * @param array $row
    *
    * @return \Illuminate\Database\Eloquent\Model|null
    */
    public function model(array $row)
    {
        return new Todo([
            'user_id'  => $row[0],
            'todo'     => $row[1],
        ]);
    }
}

接下来让控制器处理文件，并将其传递给 todosimport 文件

 public function importExcel(Request $request) 
    {

        if (empty($request->file('file')->getRealPath())) {
            return back()->with('success','No file selected');
        }
        else {
        Excel::import(new TodoImport, $request->file('file'));

        return response('Import Succesful, Please Refresh Page');
        }

    }

注意 Excel::import()。我传入了新的 Todo 模型并收到了文件。

当然对我来说，因为我是通过 ajax 来完成的，我使用这条路由来 ping 方法

Route::post('/import', 'TodosController@importExcel');

如何在 Vue 中使用 FormData() 上传文件

How To Use FormData() For Uploading File In Vue

file-upload

form-data

vue.js

axios