上传文件的blob到Amazon S3 [英] Uploading blob file to Amazon s3

问题描述

我使用ngCropImage裁剪图像，并希望把它上传以下这链接：

I am using ngCropImage to crop an image and want to upload it following this link:

NgCropImage指令返回我dataURI的形象，我将其转换为一个blob（转换后，我得到一个blob对象：具有尺寸和类型），转换DataURI使用以下code到BLOB：

NgCropImage directive is returning me dataURI of the image and I am converting it to a blob (after converting it I get a blob object: which has size and type), Converted DataURI to blob using following code:

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

现在，我想用这个，但我无法弄清楚如何此Blob文件上传到S3（因为我没有在BLOB文件中获取'名'）

Now, I want to upload this blob on S3 using this, but I am not able to figure out how to upload this blob file to s3 (as I am not getting 'name' in the blob file)

任何帮助将是非常美联社preciated。谢谢

Any help would be really appreciated. Thanks

推荐答案

您可以随时创建BLOB文件。你可以通过文件名也。

You can always create file from blob. You can pass file name also.

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

这同一个文件对象，你可以用它来在S3上传

This same file object you can use to upload on s3.

更改handleSave方法如下。文件名现在将abc.png为

Change your handleSave method to following. File name will be abc.png for now

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

这篇关于上传文件的blob到Amazon S3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！