如何将base64字符串转换为文件？

THpubs 发表于 Dev

酒馆

我使用了一个jQuery插件来裁剪图像。该插件将裁剪图像并将其作为base64编码的字符串提供给我。为了将其上传到S3，我需要将其转换为文件并将该文件传递到上传功能中。我怎样才能做到这一点？我尝试了很多事情，包括使用解码字符串atob。没有工作。

这是裁剪插件（“ croppie”）的代码，它为我提供了编码后的字符串：

imageCropper.croppie('result', {
    type: 'canvas',
    size: 'viewport',
    format: 'jpeg'
}).then(function (resp) {
  updateAvatar(resp);
});

我将其传递给名为的函数updateAvatar。这是updateAvatar函数：

updateAvatar({Meteor, Slingshot}, avatar) {
  const uploader = new Slingshot.Upload('userAvatarUpload');

  uploader.send(avatar, function (error, downloadUrl) {
    if (error) {
      // Log service detailed response.
      console.error('Error uploading', uploader.xhr.response);
      console.log(error);
    }
    else {
      console.log('uploaded', downloadUrl);
    }
  });
}

uploader.send函数需要文件或URL。它不会接受我的编码字符串。

我用来将文件上传到S3的插件：https : //github.com/CulturalMe/meteor-slingshot

Arnauld

似乎您的代码中缺少“砖”是一个函数，它将获取base64编码的图像并将其转换为Blob。

因此，我将只专注于该部分，并为每个步骤提供简短的评论。

以下函数需要一个字符串，例如：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICA...

function base64ImageToBlob(str) {
  // extract content type and base64 payload from original string
  var pos = str.indexOf(';base64,');
  var type = str.substring(5, pos);
  var b64 = str.substr(pos + 8);

  // decode base64
  var imageContent = atob(b64);

  // create an ArrayBuffer and a view (as unsigned 8-bit)
  var buffer = new ArrayBuffer(imageContent.length);
  var view = new Uint8Array(buffer);

  // fill the view, using the decoded base64
  for(var n = 0; n < imageContent.length; n++) {
    view[n] = imageContent.charCodeAt(n);
  }

  // convert ArrayBuffer to Blob
  var blob = new Blob([buffer], { type: type });

  return blob;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。