[Vuejs]-Upload and view an input file using VueJS

I don’t know haml, and I do not use typescript with vue.js. So I cannot give you a direct answer.

Here is a working jsFiddle example that implements FileReader with vue.js to provide an instant preview:
https://jsfiddle.net/mani04/5zyozvx8/

You may use the above for reference to debug your code.

Here is how it works: To make FileReader work properly, we need access to the DOM element for input. This can be accomplished as shown below:

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

The previewImage method gets the event parameter, which has event.target – the DOM element for input that we need. Now your previewImage method can read the image file normally as follows:

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

You may use this jsFiddle for reference, and keep this question open, so that others with knowledge of haml and typescript may provide a more direct answer.

I think the problem is caused because of this line in your page_image.haml

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

If it translates or compiles to <image src="image" name="image">, then your browser will look for image in localhost:8080/image instead of attempting to show from data.image inside Vue component.

As explained in my other answer, I dont know haml, so you have to figure out a way to fix it yourself.

Edit:

Looking at the other haml code in your question, does this work?

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