将 blob 文件上传到 Amazon s3答案

【问题标题】：Uploading blob file to Amazon s3将 blob 文件上传到 Amazon s3
【发布时间】：2015-10-28 04:28:11
【问题描述】：

我正在使用 ngCropImage 裁剪图像并希望通过this 链接上传它：

NgCropImage 指令返回图像的 dataURI，我将其转换为 blob（转换后我得到一个 blob 对象：具有大小和类型），使用以下代码将 DataURI 转换为 blob：

/*html*/
<img-crop image="myImage" result-image="myCroppedImage" result-image-size="250"></img-crop>

$scope.myImage='';
$scope.myCroppedImage = {image: ''}
var blob;

//called when user crops 
var handleFileSelect=function(evt) {
  var file=evt.currentTarget.files[0];
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope){
      $scope.myImage=evt.target.result;
    });
  };
  console.log($scope.myCroppedImage)
  reader.readAsDataURL(file);
  var link = document.createElement('link');

  blob = dataURItoBlob($scope.myCroppedImage)
  console.log(blob)
};

angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);


function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  var binary = atob(dataURI.split(',')[1]);
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

  var array = [];
  for(var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {type: mimeString});
}

$scope.upload = function(file) {
  //var file = new File(file, "filename");
  // Configure The S3 Object 
  console.log($scope.creds)
  AWS.config.update({ accessKeyId: $.trim($scope.creds.access_key), secretAccessKey: $.trim($scope.creds.secret_key) });
  AWS.config.region = 'us-east-1';
  var bucket = new AWS.S3({ params: { Bucket: $.trim($scope.creds.bucket) } });

  if(file) {
    //file.name = 'abc';
    var uniqueFileName = $scope.uniqueString() + '-' + file.name;
    var params = { Key: file.name , ContentType: file.type, Body: file, ServerSideEncryption: 'AES256' };

    bucket.putObject(params, function(err, data) {
      if(err) {
        // There Was An Error With Your S3 Config
        alert(err.message);
        return false;
      }
      else {
        // Success!
        alert('Upload Done');
      }
    })
    .on('httpUploadProgress',function(progress) {
          // Log Progress Information
          console.log(Math.round(progress.loaded / progress.total * 100) + '% done');
        });
  }
  else {
    // No File Selected
    alert('No File Selected');
  }
} 

$scope.uniqueString = function() {
  var text     = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for( var i=0; i < 8; i++ ) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

//for uploading
$scope.handleSave = function(){
  $scope.upload(blob);
}

现在，我想使用 this 在 S3 上上传此 blob，但我无法弄清楚如何将此 blob 文件上传到 s3（因为我没有在 blob 文件中获取“名称”）

任何帮助将不胜感激。谢谢

【问题讨论】：

标签： angularjs amazon-s3

【解决方案1】：

不建议放钥匙

secretAccessKey: $.trim($scope.creds.secret_key)

在客户端......这还没有完成！任何人都可以随意操纵你的存储桶。

【讨论】：

它没有回答 OP 提出的问题。这只是一个评论
您的评论必须填写为评论而不是答案。 :)
我相信他已将此作为答案而不是评论提交，因为他没有合适的声誉。也就是说，这并不能回答问题，但我很欣赏你的意图

【解决方案2】：

您始终可以从 blob 创建文件。您也可以传递文件名。

var file = new File([blob], "filename");

您可以使用该文件对象在 s3 上上传。

将您的 handleSave 方法更改为以下。文件名暂时为 abc.png

//for uploading
$scope.handleSave = function(){
  blob = dataURItoBlob($scope.myCroppedImage)
  $scope.upload(new File([blob], "abc.png"));
}

【讨论】：