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的打字稿。所以我不能直接回答你。

这是一个有效的jsFiddle示例，它使用FileReader实现vue.js以提供即时预览： https://jsfiddle.net/mani04/5zyozvx8/

您可以使用上面的参考来调试您的代码。

以下是它的工作原理：为了使FileReader正常工作，我们需要访问input的DOM元素。这可以通过以下方式完成：

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

previewImage方法获取event参数，该参数包含event.target - 我们需要的input的DOM元素。现在，您的previewImage方法可以正常读取图像文件，如下所示：

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作为参考，并保持此问题的开放性，以便了解haml和typescript的其他人可以提供更直接的答案。

Answer 2

我认为问题是由于page_image.haml

中的这一行引起的

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

如果它翻译或编译为<image src="image" name="image">，则您的浏览器会在localhost:8080/image中查找图片，而不是尝试在Vue组件内显示data.image。

正如我在其他答案中所解释的那样，我不知道haml，所以你必须想办法自己解决这个问题。

修改

查看问题中的其他haml代码，这有用吗？

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

使用VueJS上传和查看输入文件

2 个答案: