Image Meteor：上传图像并将其保存为base64字符串

我有一个Meteor应用程序，我对以最简单的方式上传图像感兴趣

我能想到的最简单的方法是在客户端上以某种方式将图像转换为base64字符串，并将其作为字符串保存到数据库中

---

如何将用户文件系统上的图像转换为base64字符串，然后保存到数据库中

您可以使用HTML5文件输入：

HTML

然后，我们可以使用被动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

请注意，此解决方案是高度不可缩放的，因为图像数据将不可缓存，并将污染应用程序数据库的常规通信（应仅包含类似文本的值）

您可以从

数据URL

获取base64数据，然后将其上传到Google云存储或Amazon S3，并在CDN后面提供文件

您还可以使用为您完成所有这些工作的服务，如uploadcare或filepicker

编辑：

此解决方案易于实现，但存在一个主要缺点，即从mongodb获取大的base64字符串会减慢应用程序获取其他数据的速度，DDP通信始终处于活动状态，目前无法访问，因此应用程序将始终从服务器重新下载图像数据

您不会将

dataUrl

s保存到Amazon，而是直接保存图像，然后应用程序使用带有可缓存HTTP请求的Amazon URL获取图像

在文件上传方面，您有两种选择：可以使用特定的javascript浏览器API直接从客户端上传文件，也可以在服务器的Node.js（NPM模块）API中上传文件

如果您希望从服务器上传（这通常更简单，因为您不需要要求应用程序的用户针对第三方服务进行身份验证，只有您的服务器将充当与Amazon API通信的可信客户端），然后，您可以使用

dataUrl

作为参数，通过方法调用发送用户想要上传的数据

---

如果你不想深入研究这些问题，请考虑使用Apple Advress或FrimePoer，但请记住，这些都是有偿服务（如Amazon S3 BTW）。

不确定这是否是最好的方法，但你可以用文件阅读器轻松地做到这一点。在获取文件内容的模板事件处理程序中，可以将文件传递给读取器并返回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的原因是因为我不必处理上传文件并将其保存到amazon以及获取文件链接的问题。我认为这很容易，因为我可以像对待任何数据一样对待图像，并使用imgsrc填充页面。因此，我想您建议将字符串存储在AmazonS3或其他东西上会起作用。这仍然比传输实际的图像文件容易。我想知道在哪里可以存储和检索字符串值，几乎是免费和快速的？这对在Amazon S3上存储dataUrl毫无意义，请参阅我的编辑。如何在base64中获取多个文件及其dataUrl？如何在服务器上保存图像。任何人都可以发布工作代码吗？我尝试使用ImageCollection.write函数，但失败。谢谢

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

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