Vue - 숨겨진 입력 필드에 파일을 가져 오는 방법

현재 이미지를 미리보고 있지만 실제로 파일을 내 양식으로 반환하여 나중에 백엔드에서 제출할 수는 있지만 확실하지는 않습니다. 그렇게하는 방법? 나는이 같은 formData 객체에 파일을 데이터 기능에 formData:new FormData()를 추가 한 후 추가로 시도Vue - 숨겨진 입력 필드에 파일을 가져 오는 방법

<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>

이

내 구성 요소입니다

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

하지만 오류가 발생합니다 :

formData is not defined

출처

2016-10-13 Marco

안녕하세요 저는 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]; 
    } 

    ....

참조 :

출처

2016-10-14 08:46:58 Sabrina

내가 제안한대로했는데 dd (Input :: all())를 수행 할 때 컨트롤러에 파일이 없습니다. – Marco

Vue - 숨겨진 입력 필드에 파일을 가져 오는 방법

답변

관련 문제