VuesJSフォームとRails 5.1のファイルアップロードエラー

Question

Rails 5.1アプリケーションにVuejsで構築されたフォームがあります。すべてのフィールドは正常に動作し、ファイルのアップロードを除いてデータベースにデータを保持します。私はVuejsに新しいですし、これも動作するように取得する方法を見つけ出すことはできません、エラーコンソールの上部に印刷された

[Vue warn]: Error compiling template:、そして基本的に私の全体のテンプレートコード、

- <input v-model="variation.photo_one" type="file">: File inputs are read only. Use a v-on:change listener instead.

を取得しますこれに関する多くの他のオンライン投稿を読んだ後。

_form.html.erb

<%= content_tag :div, 
id: "product-form", 
data: { 
    id: product.id, 
    product: product.to_json(except: [:id, :created_at, :updated_at]), 
    variations_attributes: product.variations.to_json(except: [:product_id, :created_at, :updated_at]), 
} do %> 
... 
    <div class="col-md-4 upload-block"> 
     <label>Photo One</label> 
     <input type="file" v-model="variation.photo_one" style="margin-bottom: .5em"> 
    </div> 
    ... 
<% end %> 

app_vue.js

import Vue from 'vue/dist/vue.esm' 
import TurbolinksAdapter from 'vue-turbolinks' 
import VueResource from 'vue-resource' 

Vue.use(VueResource) 
Vue.use(TurbolinksAdapter) 

document.addEventListener('turbolinks:load',() => { 
    Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content') 

    var element = document.getElementById("product-form") 
    if (element != null) { 

    var id = element.dataset.id 
    var product = JSON.parse(element.dataset.product) 
    var variations_attributes = JSON.parse(element.dataset.variationsAttributes) 
    variations_attributes.forEach(function(variation) { variation._destroy = null }) 
    product.variations_attributes = variations_attributes 

    var app = new Vue({ 
     el: element, 
     data: function() { 
     return { id: id, product: product } 
     }, 
     methods: { 
     addVariation: function() { 
      this.product.variations_attributes.push({ 
      id: null, 
      name: "", 
      photo_one: "", 
      //position: "", 
      _destroy: null 
      }) 
     }, 

     removeVariation: function(index) { 
      var variation = this.product.variations_attributes[index] 

      if (variation.id == null) { 
      this.product.variations_attributes.splice(index, 1) 
      } else { 
      this.product.variations_attributes[index]._destroy = "1" 
      } 
     }, 

     undoRemove: function(index) { 
      this.product.variations_attributes[index]._destroy = null 
     }, 

     saveProduct: function() { 
      // Create a new product 
      if (this.id == null) { 
      this.$http.post('/products', { product: this.product }).then(response => { 
       Turbolinks.visit(`/products/${response.body.id}`) 
      }, response => { 
       console.log(response) 
      }) 

      // Edit an existing product 
      } else { 
      this.$http.put(`/products/${this.id}`, { product: this.product }).then(response => { 
       Turbolinks.visit(`/products/${response.body.id}`) 
      }, response => { 
       console.log(response) 
      }) 
      } 
     }, 

     existingProduct: function() { 
      return this.product.id != null 
     } 

     } 
    }) 

    } 
}) 

Answer 1

ファイルは、Vueの中で少しぎこちないです。メッセージには、type="file"の入力にv-modelを使用することはできません。その代わりに、changeイベントを使用し、手動でファイルを処理するためにコンポーネント内のメソッドを呼び出す必要があります。あなたはAJAXリクエストを送信すると

<input type="file" @change="handleFileChange" /> 

methods: { 
    handleFileChange(event) { 
     //you can access the file in using event.target.files[0] 
     this.fileField = event.target.files[0]; 
    } 
} 

は、おそらくjavascriptオブジェクトを提出するのではなく、FormDataオブジェクトを提出する必要があります。 MDNドキュメントには、その使い方の説明があります。私は、FormDataがファイルのアップロードを処理するのがより面倒な部分であることを知っています。 https://developer.mozilla.org/en-US/docs/Web/API/FormData