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

【问题标题】：Upload and view an input file using VueJS使用 VueJS 上传和查看输入文件
【发布时间】：2017-03-07 16:10:14
【问题描述】：

我正在使用 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

【问题讨论】：

您的代码只是在浏览器本身读取图像。然后，您必须使用某种 XHR 将其发送到服务器，然后才能转身从服务器加载它。
你知道你可以使用URL.createObjectURL(file)而不是使用文件阅读器...

标签： javascript typescript haml vue.js

【解决方案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的人可以提供更直接的答案。

【讨论】：

请忽略我上面的回答...和你给出的codePen例子一样，我现在才注意到。

【解决方案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")

【讨论】：