@noob_NOOB

Как загрузить изображение в форме через Vue без отправки самой формы?

Есть некая форма с множеством полей. Есть инпут для загрузки изображения. Хочу реализовать загрузку изображения через Vue, чтобы можно было сразу отобразить миниатюру загруженного изображения, до отправки заполненной формы.

Есть такой компонент:
export default {
        name: "upload-image",
        props: [
            'result',
            'sizes'
        ],
        data: function() {
            return {
                files: []
            }
        },
        methods: {
            onFileChange: function(e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },
            createImage: function(file) {
                let reader = new FileReader();
                let vm = this;
                reader.onload = function(e) {
                    vm.image = e.target.result;
                };
                reader.readAsDataURL(file);
               
            },
            upload: function(){
                let data = new FormData();
                let that = this;

                data.append('file', this.image);
                data.append('sizes', this.sizes);
                data.append('root', 'uploads/test');

                axios.post('/api/photo/upload-base64', data)
                    .then(function(res) {
                        let result_input = document.querySelector('input[name=' + that.result + ']');
                        let data = res['data'];
                        result_input.value = data['path'];
                    });

            }
        }
    }


Шаблон компонента выглядит так:
<template>
    <div class="d-flex flex-row align-items-center" style="height: 100%;">
        <div class="card d-flex" style="width: 100%">
            <div class="card-body">
                <input type="file" accept="image/jpeg, image/gif, image/png" id="upload-file"  @change="onFileChange"/>
                <button @click="upload" class="btn btn-primary btn-block mt-4">Загрузить</button>
            </div>
        </div>
    </div>
</template>


Компонент просто вставляется в исходную форму.

Проблема в том, что после получения ответа от сервера и обработки промиса axios вся форма автоматически отправляется. Как можно ли реализовать загрузку файла, без отправки самой формы и костылей?
  • Вопрос задан
  • 4277 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Отменяйте действие по умолчанию при клике на кнопку: @click.prevent="upload".
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы