Question

我没有使用任何编程语言上传文件的经验，所以这对我来说有点麻烦。

我有一个需要保存在Amazon S3中的存储桶中的画布（如果它更简单，则可以保存在任何其他优质服务中）。我知道toDataURL()并且它在这种情况下很有用，但从那里开始实际上传它仍然是一个很大的步骤。

我查看了一些软件包，Slingshot包含在内，但文档并没有通过我的用例，而且它们非常复杂，对我来说，很大程度上是不可理解的。

进一步使问题更复杂的是我后来想要添加PDF文件上传，并且使用相同的包/服务是有意义的，因为它会节省我很多时间，但我不会＆＃39;知道是否存在这样一个多功能的解决方案。

我有点失落，也许正在寻找比这里所接受的更为一般的指导，但是在正确方向上的一个好推动也是可以接受的。

还应该注意的是，每当我尝试使用toDataURL()时，我都会收到此错误：

SecurityError：无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：受污染的画布可能不会出口。

Answer 1

Slingshot非常适合它。

您需要从画布中提取Blob（use this method），然后将其传递给弹弓：

function uploadImage(directive, canvas, type, callback) {
    var uploader = new Slingshot.Upload(directive);

    canvas.toBlob(function (blob) {
        blob.type = type;
        upload.send(blob, callback);
    }, type);

    return uploader;
}

uploadImage("myDirective", document.getElementById("mycanvas"), "image/png", function (error, downloadUrl) {
    console.log("file is now at %s", downloadUrl);
});

现在服务器端可能是（但它实际上取决于你真正想要的）：

Slingshot.create("myDirective", Slingshot.S3Storage, {
  allowedFileTypes: "image/png"

  acl: "public-read",

  authorize: function () {
    //Deny uploads if user is not logged in.
    if (!this.userId) {
      var message = "Please login before posting files";
      throw new Meteor.Error("Login Required", message);
    }

    return true;
  },

  key: function (file) {
    //Store file into a directory by the user's username.
    var user = Meteor.users.findOne(this.userId);
    return user.username + "/canvas.png";
  }
});

如果您想支持pdf上传，您只需要将application/pdf添加到allowedFileTypes或创建一个授权pdf上传的单独指令。

你可以在弹弓at this unreleased branch上找到更好的文档。

在Meteor中将图像从画布上传到S3

1 个答案: