이미지 구성 요소에 이미지 src를 문자열로 설정하는 방법은 무엇입니까?

Question

Base-64로 인코딩 된 형식의 이미지를 서버로 보내려면 두 가지 구성 요소를 만들었습니다. 부모 구성 요소가 마운트되면 자식 참조를 file로 설정해야합니다.

는

Vue.component('some-form', { 
    template: '#some-form', 
    data: function() { 
    return { 
     logoImage: '', 
     coverImage: '' 
    } 
    }, 
    methods: { 
    onSubmit: function(event) { 
     var dataForm = {}; 
     var that = this; 
     dataForm['logo-image'] = this.logoImage; 
     dataForm['cover-image'] = this.coverImage; 

     // AJAX REQUEST HERE with posting data 
    }, 
    }, 
    mounted: function(){ 
    var $this = this; 

    // AJAX REQUEST HERE with getting data 
    } 
}); 

Vue.component('upload-photo', { 
    template: '#upload-photo', 
    data: function() { 
    return { 
     image: { 
     body: '', 
     'content-type': '', 
     'content-length': '', 
     url: '' 
     }, 
     imageBody: '' 
    } 
    }, 
    props: ['logoImage', 'title', 'description'], 
    watch: { 
    'image': function() { 
     this.$emit('input', this.image); 
    } 
    }, 
    created: function(){ 
    this.image = this.logoImage; 
    }, 
    mounted: function() { 
    var that = this; 
    //AJAX REQUEST HERE to get data 
    }, 
    methods: { 
    onFileChange: function(e) { 
     var files = e.target.files || e.dataTransfer.files; 
     if (!files.length) 
     return; 
     this.createImage(files[0]); 
    }, 
    createImage: function(file){ 
     var image = new Image(); 
     var reader = new FileReader(); 
     var vm = this; 
     vm.image = {}; 

     reader.onload = function(e) { 
     vm.image.body = e.target.result; 
     vm.imageBody = e.target.result; 
     }; 

     vm.$set(vm.image, 'content-type', file.type); 
     vm.$set(vm.image, 'content-length', file.size); 

     reader.readAsDataURL(file); 
    }, 
    removeImage: function (e) { 
     this.image = ''; 
    } 
    } 
}); 

var app = new Vue({ 
    el: '#app', 
    data: function() { 

    }, 
    methods: { 

    }, 
    mounted: function() { 

    } 
}); 

전체 예를 https://codepen.io/anon/pen/ZvzwzO 어떻게이 구현 될 수 있는가?

P. 같은 구성 요소에서 구현하는 방법을 모르겠습니다. 두 개의 속성이있는 문자열로 데이터를 보내지 만 문자열로 연결되지만 링크가 있습니다.

P.S. 검색하는 방법이 필요합니다.

Answer 1

정확히 무엇을 요구하고 있는지 말하기는 어렵지만 부모 구성 요소에서 자식으로 데이터를 전달하려는 것처럼 들립니다. 아직 읽지 않은 경우 부모 구성 요소에서 하위 구성 요소로 속성을 전달할 때는 Composing components 및 Dynamic Props을 읽으십시오.

이렇게하려면 데이터의 일부가 아닌 upload-photo 구성 요소의 속성을 imageBody으로 만드십시오.

<upload-photo v-model="logoImage" title="TITLE 1" description="description_1" v-bind:image-body="imageBody"> 

는 this phpfiddle를 살펴 보자 :

props: ['logoImage', 'title', 'description', 'imageBody'], 

그런 다음 부모가 해당 속성에 대한 값을 제공합니다. 폼이 마운트되면 AJAX 호출을 서버로 보내어 URL을 검색 한 다음 해당 첫 번째 upload-photo 자식 요소의 속성을 AJAX 응답으로 서버에서 다시 보낸 URL로 설정합니다. imageBody이 image 대신 truey 인 경우 upload-photo 템플릿이 이미지를 표시하도록 변경되었습니다.