Как объединить два метода?

151

10 августа 2018, 13:50

Метод uploadImage:

         `uploadImage(event) {
            const URL = 'http://foobar.com/upload'; 
            let data = new FormData();
            data.append('name', 'my-picture');
            data.append('file', event.target.files[0]); 
            let config = {
              header : {
                'Content-Type' : 'image/png'
              }
            }
            axios.put(
              URL, 
              data,
              config
            ).then(
              response => {
                console.log('image upload response > ', response)
              }
            )
         }`

отвечает за отправку файла на сервер, вот input Для него:

<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input">

А вот метод для создания записи:

             create: function(){
                axios.post('/api/crud',{
                    name: this.name,
                    keywords: this.keywords,
                    title: this.name
                }).then(response =>{
                    console.log(response)
                    location.href = '/crud';
                }).catch(error =>{
                    console.log(error.response)
                });
            }

Как эти два метода объединить, чтоб они срабатывали по клику на одно кнопку?

Answer 1

Вам необходимо сохранять изображение, после сохранения сущности, ведь нет смысла загрузить изображение раньше, чем сохранится сущность для него. Метод uploadImage нужно переписать так, чтобы он возвращал promise можно в виде axios запроса.

uploadImage(event) {
  ...
  return axios.put(...)
}

и в методе create вызывать метод uploadImage

create: function(){
            axios.post('/api/crud',{
                name: this.name,
                keywords: this.keywords,
                title: this.name
            //Сохраняем изображение
            })
            .then(response => this.uploadImage())
            .then(response => {
                ...
               location.href = '/crud';
            }).catch(err => ...);
        }

p.s. ознакомьтесь с документацией по роутингу в vue, менять страницу через изменение location.href = моветон