Question

我不确定如何为图像制作axios帖子。

这是我的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
      }
    }
  }

这是我repo中文件的链接。

Answer 1

第一个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)
  })
},

Carrierwave：将图像从Vue Front上传到Rails API

1 个答案: