在 Meteor 中跨路由传递文件

Question

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

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

这成功将我带到裁剪页面。在这一点上，虽然我不确定如何将文件引用从 myTemplate 获取到 Crop。下面的代码是我成功地将上传的图像绘制到 canvas 中的代码，当它们在同一模板中时。

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

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

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

在您的模板文件之上：，或进入您的 client/app.js

var myFile;

进入您的更改事件：

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

进入您的裁剪路线，只需在任何您想要的地方使用 myFile 变量！

在 Meteor 中跨路由传递文件

Pass file across route in Meteor

javascript

file

meteor

iron-router