因此,我之前曾问过一个问题,并得到了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
对象上?
我参考了其他有关如何发布的文章,但没有得到理想的结果。
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)
答案 0 :(得分:1)
我已复制了您的代码,但似乎工作正常
当我console.log(file)时,formData对象为空
是的,在您进行控制台时,输出应该是一个空对象,这就是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>
答案 1 :(得分:1)
这篇文章回答了问题的第二部分。首先,从我读到的maatwebsite/excel
版本3.0 看,它不支持导入。但是,我使用的是版本3.1.0 ,它确实支持导入。但是,导入方法仍然不支持Excel::load()
。您应该改用Excel::import()
并遵循给定的规则来传递参数。当然可以修改以满足您的需求。但是无论如何,这里只是一个简单的示例,说明我如何对有兴趣的人使用它。
首先为任何模型创建导入文件。对我来说是托多斯。
<?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');