Javascript 在Meteor中通过路由传递文件
一页,我有一个文件选择器输入。当用户选择一个文件时,我希望将用户定向到一个单独的路由,该路由包含一个交互式图像裁剪器,用于在我将图像上载到服务器之前准备图像。由于我希望能够使用“后退”按钮从裁剪器中退出,因此只有在单独的路线中这样做才有意义。我用铁制的路由器来做这个Javascript 在Meteor中通过路由传递文件,javascript,file,meteor,iron-router,Javascript,File,Meteor,Iron Router,一页,我有一个文件选择器输入。当用户选择一个文件时,我希望将用户定向到一个单独的路由,该路由包含一个交互式图像裁剪器,用于在我将图像上载到服务器之前准备图像。由于我希望能够使用“后退”按钮从裁剪器中退出,因此只有在单独的路线中这样做才有意义。我用铁制的路由器来做这个 Template.myTemplate.events({ 'change input[type="file"]': function(e, t) { Router.go('Crop'); } });
Template.myTemplate.events({
'change input[type="file"]': function(e, t) {
Router.go('Crop');
}
});
这成功地将我带到裁剪页面。在这一点上,虽然我不知道如何从myTemplate获取文件引用以进行裁剪。下面的代码是我在同一模板中成功地将上传的图像绘制到画布中的代码
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]);
我只需要在更改路由时找到一种传输文件引用的方法。您将无法从裁剪模板中从myTemplate获取文件引用。一旦您调用裁剪模板,我的模板将被卸载,不再可用 在更改事件中,可以将文件引用存储到应用程序范围中的变量中。从裁剪模板中调用 在模板文件的顶部:,或放入客户端/app.js
var myFile;
在您的变更事件中:
Template.myTemplate.events({
'change input[type="file"]': function(e, t) {
myFile = e.currentTarget.files[0];
Router.go('Crop');
}
});
在裁剪路线中,只要在任何需要的地方使用myFile变量即可