Question

一页，我有一个文件选择器输入。当用户选择文件时，我希望用户被定向到包含交互式图像裁剪器的单独路径，该图像裁剪器用于在将图像上载到服务器之前准备图像。由于我希望能够使用后退按钮从裁剪器中逃脱，因此在单独的路径中执行此操作才有意义。我正在使用铁路由器。

Template.myTemplate.events({
    'change input[type="file"]': function(e, t) {
        Router.go('Crop');
    }
});

这成功将我带到了裁剪页面。此时虽然我不确定如何从myTemplate获取文件引用到Crop。下面的代码就是我成功使用它来将上传的图像绘制到画布中时，它们位于同一个模板中。

var reader = new FileReader();
reader.onload = function(e) {
    img = new Image();
    img.onload = function() {
         //Draw image into canvas element
    };
    img.src = e.target.result;
};
reader.readAsDataURL(e.target.files[0]);

我只需要在更改路径时找到一种传输文件引用的方法。

Answer 1

您无法从Crop模板中获取myTemplate的文件引用。一旦调用Crop模板，我的模板就会卸载并且不再可用。

在change事件中，您可以将文件引用存储到应用程序范围中的变量中。并从Crop模板中调用它。

在模板文件的顶部：或您的客户端/ app.js

var myFile;

进入您的更改活动：

Template.myTemplate.events({
  'change input[type="file"]': function(e, t) { 
  myFile = e.currentTarget.files[0];  
  Router.go('Crop'); 
  } 
});

进入裁剪路线，只需在任意位置使用myFile变量！

在Meteor中通过路径传递文件

1 个答案: