Загрузить файл с помощью Vuejs

Question

Я работаю в Ларавеле.Мне нужно загрузить файл с Vuejs.но это не работаетЯ добавляю этот код:

Blade (загрузка файла):

<input class="form-control" type="file" >

Скрипт Vuejs: var app = new Vue ({el: '#app',

data: {
person: {
        id: 0,
        user_name:'',
        position_id:'',
        image:'',
        },
        },


    methods: {
      addPerson: function () {
        axios.post('/addperson', this.person)
            .then(response => {
                console.log(response.data);
                if (response.data.etat) {
                    this.person = {
                         id: 0,
                          user_name: response.data.etat.user_name,
                          position_name: response.data.etat.position_id,
                          image: response.data.etat.image
                    };
                }

            })
            .catch(error => {
                console.log('errors: ', error)
            })
    },

Контроллер:

public function addPerson(Request $request){
$person = new Person;

$person->user_name=$request->user_name;
$person->position_id=$request->position_id;
 if($request->hasFile('photo')){
     $person->image= $request->image->store('image');
    }
$person->save();

return back()->with('success', 'New Position added successfully.');

Моя функция публикации Axios работает без кода строки загрузки изображения. Я просто не знаю, как добавить код загрузки.

Спасибо, если кто-то можетпомощь.

Answer 1

В вашем блейд-файле

<input type="file" @change="onFileChange" name="id_image" id="id_image" class="inputFile">

В вашем файле vue.js под методами:

    onFileChange(e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },

createImage(file) {
            let reader = new FileReader();
            reader.onload = (e) => {
                this.person.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },

Это должно позволить вашему коду axios загрузить изображение.Обратите внимание, что он загружается в base64, поэтому, если вам нужны валидаторы, вам придется создать собственный валидатор для изображений base64.