Carrierwave：从vue前端上传一张图片到rails api

Question

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

这就是我的 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 中文件的 link。

Answer 1

首先this.$refs.myFiles.filesreturns一个文件数组。像这样更改您的方法以将文件设置为 blog.link:

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

现在要在您的 post 请求中发送文件，您应该使用 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前端上传一张图片到rails api

Carrierwave: upload an image from vue front to rails api

vue.js

rails-api