流星：上传图像并以base64格式保存到数据库字符串

Question

我有一个Meteor应用程序，我很想让图像上传以最简单的方式工作。

我能想出的最简单的方式是将图像转换成某种方式对一个base64字符串在客户端上和它保存到数据库作为一个字符串。

怎么可能到图像上的用户文件系统转换成一个base64字符串，然后将其保存到数据库？

Answer 1

您可以使用HTML5文件输入：

HTML

<template name="fileUpload"> 
    <form> 
    <input type="file" name="imageFile"> 
    <button type="submit" disabled={{submitDisabled}}> 
     Submit 
    </button> 
    </form> 
</template> 

后来听变化事件，并使用FileReader读取本地文件作为我们要去一个base64数据网址存储在一个反应​​VAR：

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); 
    } 
}); 

然后我们可以使用无功VAR值允许/禁止表单提交和值发送到服务器：

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 s是，你可以直接使用它们作为一个图像标记src。

注意，该解决方案具有不可扩展的图像数据将不会被缓存，并会污染应用数据库定期沟通（它应该只包含文本样值）。

你可以获取从dataUrl以base64数据，并将其上传到谷歌云存储或Amazon S3和服务后面的CDN文件。

你也可以使用服务为你做所有这些东西，比如uploadcare或filepicker。

编辑：

这种解决方案很容易实现，但配备的主要缺点，从MongoDB中获取大的base64字符串会减慢你的应用程序从获取其他数据，DDP通信总是生活，不能被缓存在此刻如此您的应用将始终从服务器重新下载图像数据。

您不会将dataUrl保存到亚马逊，您可以直接保存图片，并且您的应用程序将使用带有可高速缓存的HTTP请求的亚马逊网址抓取图片。

你有两个选择，当涉及到文件上传：您可以使用特定的JavaScript的浏览器的API直接上传到从客户端，也可以上传到内的Node.js（NPM模块）在服务器API。

如果你想从服务器上传（这通常比较简单，因为你不需要你的应用程序的用户使用第三方服务进行身份验证，只有你的服务器将作为可信的客户端进行通信使用Amazon API），那么您可以通过方法调用发送用户想要上传的数据，其中dataUrl作为参数。

如果你不想潜入所有这些东西考虑使用uploadcare或filepicker，但请记住，这些都是有偿服务（如亚马逊是S3 BTW）。

Answer 2

不知道这是否是最好的方法，但是您可以使用文件读取器轻松完成此操作。在获取文件内容的模板事件处理程序中，可以将该文件传递给阅读器并获取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); 
    } 
});