VueJS를 사용하여 입력 파일 업로드 및보기

Question

저는 TypeScript와 Haml을 사용하고 있습니다. vue.js를 사용하여 파일을 업로드하고 볼 수 있기를 바랍니다. 나는 이미지를 업로드 할 수 있어요 그러나 여기 시연으로는 바로 표시하도록되어 : https://codepen.io/Atinux/pen/qOvawK/

대신,이 오류가 발생합니다 :

http://localhost:8080/image 자원을로드하지 못했습니다 : 서버 (404)의 상태로 응답 (찾을 수 없음)

루트 디렉토리에서 이미지를 가져 오려고하는 경우 문제가 있습니까? 어떻게 해결할 수 있을까요?

page_image.ts :

require("./page_image.scss"); 
import Vue = require("vue"); 
import {Injections} from "../../init"; 

export const PageImage = { 
template: require("./page_image.haml"), 
data: function() { 
    return { 
     image: '' 
    } 
}, 

created() { 
    Injections.HeaderTextManager.setHeader("Videos"); 
    Injections.HeaderTextManager.clearDescription(); 
}, 

methods: { 
    onFileChange(e:any) { 
     var files = e.target.files || e.dataTransfer.files; 
     if (!files.length) 
      return; 
     this.createImage(files[0]); 
    }, 
    createImage(file:any) { 
     var image = new Image(); 
     var reader = new FileReader(); 
     var vm = this; 

     reader.onload = (e:any) => { 
      vm.image = e.target.result; 
     }; 
     reader.readAsDataURL(file); 
    }, 
    removeImage: function (e:any) { 
     this.image = ''; 
    } 
} 
}; 

page_image.haml :

.page-image 
    .row 
    .col-xs-12 
    .box 
     .box-header 
     %div(v-if="!image") 
      %h3.box-title Upload an image 
      %input(type="file" v-on:change="onFileChange") 
     %div(v-else) 
      %img(src="image" name="image") 
      %img {{image}} 
      %button(v-on:click="removeImage") Remove image 

Answer 1

내가 haml 몰라, 내가 vue.js와 타이프 라이터를 사용하지 마십시오. 그래서 나는 당신에게 직접적인 대답을 줄 수는 없습니다. 이 https://jsfiddle.net/mani04/5zyozvx8/

당신은 당신의 코드를 디버깅하기 위해 참고 용을 사용할 수 있습니다 : 여기

인스턴트 미리보기를 제공하기 위해 vue.js와 FileReader를 구현하는 작업 jsFiddle의 예입니다.

어떻게 작동합니까? FileReader가 제대로 작동하게하려면 input의 DOM 요소에 액세스해야합니다. 아래 그림과 같이이 수행 할 수 있습니다

<input type="file" @change="previewImage" accept="image/*"> 

previewImage 방법은 event.target이있는 event 매개 변수를 가져옵니다 - 우리가 필요로하는 input의 DOM 요소를. 다음과 같이 이제 previewImage 방법은 일반적으로 이미지 파일을 읽을 수 있습니다 haml 및 typescript의 지식을 다른 사람들이 더 직접적인 대답을 제공 할 수 있도록

previewImage: function(event) { 
    // Reference to the DOM input element 
    var input = event.target; 
    // Ensure that you have a file before attempting to read it 
    if (input.files && input.files[0]) { 
     // create a new FileReader to read this image and convert to base64 format 
     var reader = new FileReader(); 
     // and so on... 

당신은 참조를 위해 jsFiddle을 사용하고, 개방이 질문을 유지할 수 있습니다.

Answer 2

나는 다음 브라우저 대신 data.image에서 보여 시도의 localhost:8080/image에서 이미지를 찾습니다, 변환 또는 <image src="image" name="image">로 컴파일하면 문제는 당신 page_image.haml

%img(src="image" name="image") 

에서이 라인으로 인해 생각 내부 Vue 구성 요소.

다른 답변에서 설명한 것처럼 나는 haml을 모릅니다. 따라서 직접 해결할 방법을 찾아야합니다.

편집 :

이 작품은, 귀하의 질문에 다른 haml 코드를 않습니다를 찾고 계십니까?

%img(v-bind:src="image" name="image")