我有一个Meteor应用程序,我希望以最简单的方式实现图像上传。
我能想到的最简单的方法是在客户端将图像转换为base64字符串,然后将其保存为字符串到数据库中。
如何将用户文件系统上的图像转换为base64字符串,然后保存到数据库中呢?
我有一个Meteor应用程序,我希望以最简单的方式实现图像上传。
我能想到的最简单的方法是在客户端将图像转换为base64字符串,然后将其保存为字符串到数据库中。
如何将用户文件系统上的图像转换为base64字符串,然后保存到数据库中呢?
HTML
<template name="fileUpload">
<form>
<input type="file" name="imageFile">
<button type="submit" disabled={{submitDisabled}}>
Submit
</button>
</form>
</template>
接着监听变化事件,并使用FileReader
将本地文件读取为一个我们将存储在响应式变量中的Base64数据URL:
Template.fileUpload.created=function(){
this.dataUrl=new ReactiveVar();
};
Template.fileUpload.events({
"change input[type='file']":function(event,template){
var files=event.target.files;
if(files.length===0){
return;
}
var file=files[0];
//
var fileReader=new FileReader();
fileReader.onload=function(event){
var dataUrl=event.target.result;
template.dataUrl.set(dataUrl);
});
fileReader.readAsDataURL(file);
}
});
然后我们可以使用响应式变量的值来允许/禁止表单提交并将该值发送到服务器:
Template.fileUpload.helpers({
submitDisabled:function(){
return Template.instance().dataUrl.get();
}
});
Template.fileUpload.events({
"submit":function(event,template){
event.preventDefault();
//
Meteor.call("uploadImage",template.dataUrl.get());
}
});
dataUrl
保存到某个集合字段值中。有趣的是,dataUrl
可以直接用作图像标记 src
。dataUrl
获取base64数据并将其上传到Google Cloud Storage或Amazon S3,并通过CDN提供文件。dataUrl
保存到Amazon上,你会直接保存图像,然后使用可缓存的HTTP请求和Amazon URL从你的应用程序中获取它。dataUrl
参数的方法调用发送用户想要上传的数据。不确定这是否是最佳方法,但您可以轻松使用文件读取器完成此操作。在获取文件内容的模板事件处理程序中,您可以将文件传递给读取器并返回一个base64字符串。例如,像这样:
Template.example.events({
'submit form': function (event, template) {
var reader = new FileReader();
var file = template.find('#fileUpload').files[0]; // get the file
reader.onload = function (event) {
// event.target.result is the base64 string
}
reader.readAsDataURL(file);
}
});