Как использовать FormData () для загрузки файла в Vue - PullRequest
Новая
       20

Как использовать FormData () для загрузки файла в Vue

0 голосов
/ 26 ноября 2018

Итак, я задал вопрос ранее и получил небольшую помощь до 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 ??

Я ссылался на другие статьи о том, как размещать сообщения, но я не получаю желаемых результатов.

статья 1 article2 

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 объект пуст

Backend Question Итак, моя проблема с 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)

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Этот пост отвечает на вторую часть вопроса.Сначала из того, что я прочитал 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, я использую этот маршрут, чтобы пропинговать метод 

Route::post('/import', 'TodosController@importExcel');
0 голосов
/ 26 ноября 2018

Я воспроизвел ваш код, и он, кажется, работает нормально

, когда я console.log (файл), объект formData пуст

Да, вывод долженбыть пустым объектом, когда вы утешаете, вот как работает javascript.

после преобразования вывода в массив я получаю вывод на изображении ниже:

enter image description here

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>
...