Javascript 使用VueJS上载和查看输入文件_Javascript_Typescript_Haml_Vue.js

Javascript 使用VueJS上载和查看输入文件

javascript typescript vue.js

Javascript 使用VueJS上载和查看输入文件,javascript,typescript,haml,vue.js,Javascript,Typescript,Haml,Vue.js,我正在使用打字脚本和Haml。我希望能够使用vue.js上传和查看文件。我可以上传一张图片，但它应该立即显示为演示：相反，我得到了以下错误：加载资源失败：服务器响应状态为404（未找到）如果它试图从根目录获取图像，我的问题是我没有将其保存在那里吗？我该如何解决这个问题 page_image.ts： require("./page_image.scss"); import Vue = require("vue"); import {Injections} from "../../init";

我正在使用打字脚本和Haml。我希望能够使用vue.js上传和查看文件。我可以上传一张图片，但它应该立即显示为演示：

相反，我得到了以下错误：

加载资源失败：服务器响应状态为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

我不知道

haml

，我也不在

vue.js

中使用typescript。所以我不能给你一个直接的回答

下面是一个正在工作的JSFIDLE示例，它使用

vue.js

实现

FileReader

，以提供即时预览：

您可以参考以上内容来调试代码

它的工作原理如下：为了使FileReader正常工作，我们需要访问

input

的DOM元素。这可以按如下所示完成：

previewImage

方法获取

event

参数，该参数具有

event.target

——我们需要的

input

的DOM元素。现在您的

previewImage

方法可以正常读取图像文件，如下所示：

previewImage:函数（事件）{
//对DOM输入元素的引用
var输入=event.target；
//在尝试读取文件之前，请确保您拥有该文件
if（input.files&&input.files[0]）{
//创建新的文件读取器以读取此图像并转换为base64格式
var reader=new FileReader（）；
//等等。。。

您可以使用此JSFIDLE作为参考，并保持此问题的开放性，以便了解

haml

和

typescript

的其他人可以提供更直接的答案。

我不知道

haml

，并且我不将typescript与

vue.js

一起使用。因此，我无法给您直接的答案

下面是一个正在工作的JSFIDLE示例，它使用

vue.js

实现

FileReader

，以提供即时预览：

您可以参考以上内容来调试代码

它的工作原理如下：为了使FileReader正常工作，我们需要访问

input

的DOM元素

previewImage

方法获取

event

参数，该参数具有

event.target

-我们需要的

input

的DOM元素。现在您的

previewImage

方法可以正常读取图像文件，如下所示：

previewImage:函数（事件）{
//对DOM输入元素的引用
var输入=event.target；
//在尝试读取文件之前，请确保您拥有该文件
if（input.files&&input.files[0]）{
//创建新的文件读取器以读取此图像并转换为base64格式
var reader=new FileReader（）；
//等等。。。

您可以使用此JSFIDLE作为参考，并保持此问题的开放性，以便了解

haml

和

typescript

的其他人可以提供更直接的答案。

我认为问题是由于您的页面中的这一行造成的

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

如果它转换或编译为

，则浏览器将在

localhost:8080/image

中查找图像，而不是尝试在Vue组件内从

数据.image

显示图像

正如我在另一个答案中所解释的，我不知道haml，所以你必须自己想办法解决它

编辑：

看看你问题中的另一个

haml

代码，这行吗

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

我认为这个问题是由于你的页面中的这一行造成的

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