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でtypescriptですを使用しないでください。だから私はあなたに直接の答えを与えることはできません。ここで

は、インスタントプレビューを提供するために、vue.jsでFileReaderを実装作業jsFiddleの例である： https://jsfiddle.net/mani04/5zyozvx8/

あなたはあなたのコードをデバッグするための基準については、上記を使用することができます。

ここでの動作は次のとおりです。FileReaderを正しく動作させるには、inputのDOM要素にアクセスする必要があります。以下に示すようにこれが実現できます

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

previewImage方法はevent.targetを持ってeventパラメータ、取得する - 私たちに必要なinputのためのDOM要素を。

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

をhamlとtypescriptの知識を持つ他の人がより直接的な答えを提供することができるようにするには、参考のためにこのjsFiddleを使用して、開いているこの質問を保つことがあります。今すぐあなたのpreviewImage方法は、次の通常の画像ファイルを読み込むことができます。

Answer 2

私はそれを翻訳したり<image src="image" name="image">にコンパイルした場合、その後、あなたのブラウザではなくdata.imageから表示するようにしようとのlocalhost:8080/imageで画像を検索します

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

あなたpage_image.hamlに問題があるため、この行の原因だと思います内部Vueコンポーネント。

私の他の答えで説明したように、私はhamlを知らないので、自分で修正する方法を見つけなければなりません。

編集：

この作品は、あなたの質問内の他のhamlコードにないお探しですか？

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