Carrierwave: загрузите изображение с vue front в rails api - PullRequest
Новая
       11

Carrierwave: загрузите изображение с vue front в rails api

0 голосов
/ 23 марта 2019

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

Вот так выглядит мой объект json. 

{
 "id":20,
 "title":"pineapple",
 "text":"pineapple",
 "date":null,
 "created_at":"2019-03-23T01:42:48.142Z",
 "updated_at":"2019-03-23T01:42:48.142Z",
 "image":{
          "url":null
         }
 }

Это мое изображение, введенное из формы Vue. 

<input  type="file" 
        id="file" 
        ref="myFiles" 
        class="custom-file-input" 
        @change="takeFile" 
        multiple>

Вот я и пытаюсь разобраться в этом. 

export default {
    data() {
      return {
        blog: {
          title: '',
          content: '',
          link: ''
        }
      }
    },
    methods: {
      submitArticle(blog) {
        console.log('blog.link', blog.link)
        axios.post('http://localhost:3000/articles', {
          title: blog.title,
          text: blog.content,
          image: {
            url: blog.link 
          }
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      takeFile(event) {
        console.log(this.$refs.myFiles.files);
        this.blog.link = this.$refs.myFiles.files
      }
    }
  }

Вот ссылка на файл в моем репо .

1 Ответ

1 голос
/ 23 марта 2019

Первый this.$refs.myFiles.files возвращает массив файлов. Измените ваш метод, как этот, чтобы установить файл blog.link: 

takeFile(event) {
  this.blog.link = this.$refs.myFiles.files[0]
}

Теперь, чтобы отправить файл в вашем почтовом запросе, вы должны использовать FormData: 

submitArticle(blog) {
  let formData = new FormData()
  formData.append("article[title]", blog.title)
  formData.append("article[text]", blog.content)
  formData.append("article[image]", blog.link)
  axios.post('http://localhost:3000/articles', formData, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(function (response) {
    console.log(response)
  }).catch(function (error) {
    console.log(error)
  })
},
...