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

问题描述：

我有一个Meteor应用程序，我很想让图像上传以最简单的方式工作。流星：上传图像并以base64格式保存到数据库字符串

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

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

如何将图像保存在服务器上。任何人都可以发布工作代码？我试图使用ImageCollection.write函数并失败。谢谢！ – 2017-11-19 22:51:00

答

您可以使用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）。

啊谢谢你的回应和关于缩放的评论。我不知道，我想使用base64的原因是因为我不需要处理上传文件并将其保存到亚马逊并获取文件的链接。我认为这很容易，因为我可以像处理任何数据一样处理图像，并使用img src使用它填充页面。所以我想你的建议将字符串存储在亚马逊S3上或其他东西将工作。它仍然比传输实际的图像文件更容易。我想知道我可以在哪里存储和检索字符串值，几乎可以自由快速地检索？ – nearpoint 2014-10-19 23:02:05

在Amazon S3上存储dataUrl没有任何意义，请参阅我的编辑。 – saimeunt 2014-10-19 23:37:21

如何在base64中获取多个文件及其dataUrl？ – Viddesh 2016-03-10 19:41:07

答

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

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

相关推荐