Vue - 非表示の入力フィールドにファイルを取得する方法

Question

現在画像をプレビューしていますが、実際にファイルをフォームに戻したいので、後でバックエンドで送信できますが、わかりませんどうやってするか？

これは私のコンポーネントである：

<template> 
<div> 
    <div v-if="!image"> 
    <h2>Select an image</h2> 
    <input type="file" @change="onFileChange"> 
    </div> 
    <div v-else> 
    <img :src="image" /> 
    <button @click="removeImage">Remove image</button> 
    <input type="file" v-bind:value="{ file }" style="display:none"> 
    </div> 
</div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      image: '', 
      formData:new FormData() 
     } 
    }, 
    methods: { 
     onFileChange: function onFileChange(e) { 
      var files = e.target.files || e.dataTransfer.files; 
      if (!files.length) 
       return; 
      this.createImage(files[0]); 
      this.formData.append('file', files[0]); 
     }, 
     createImage: function createImage(file) { 
      var image = new Image(); 
      var reader = new FileReader(); 
      var vm = this; 
      reader.onload = function (e) { 
       vm.image = e.target.result; 
      }; 
      reader.readAsDataURL(file); 
     }, 
     removeImage: function removeImage(e) { 
      this.image = ''; 
     } 
    } 
} 
</script> 

私はデータ機能にformData:new FormData()を追加し、このようFORMDATAオブジェクトにファイルを追加して試してみました：

this.formData.append('file', files[0]); 

しかし、私はエラーを取得する：

formData is not defined

Answer 1

こんにちは私はv-bind:value="{ file }、あなたはそれを削除する必要があり、それが動作します：

<input type="file" style="display:none"> 

あなたが取得したい場合は、ファイルデータを取得するためにv-model = "file"を使用して、何をthis.formData.append('file', files[0]);で行っていることは、データを取得するための正しい方法であることはできませんあなたのコンポーネントの範囲内のデータは、あなたがこのような何かを行うことができます。

data() { 
     return { 
     image: '', 
     formData:new FormData(), 
     file: null 
     } 
    }, 
    methods: { 
    onFileChange: function onFileChange(e) { 
     var files = e.target.files || e.dataTransfer.files; 
     if (!files.length) 
      return; 
     this.createImage(files[0]); 
     this.formData.append('file', files[0]); 
     this.file = files[0]; 
    } 

    .... 

参照：

• https://laracasts.com/discuss/channels/vue/vuejs-using-v-model-with-input-typefile?page=1
• http://codepen.io/Atinux/pen/qOvawK/