如何使用 Sinatra 和 AngularJS 将对象从 AWS S3 流式传输到浏览器答案

【问题标题】：How to stream object from AWS S3 to browser using Sinatra and AngularJS如何使用 Sinatra 和 AngularJS 将对象从 AWS S3 流式传输到浏览器
【发布时间】：2018-12-19 23:08:31
【问题描述】：

我能够使用 Ruby 中的以下发布请求将 S3 对象从磁盘流式传输到浏览器：

post '/api/s3/download/?' do
   filepath = "/tmp/test.txt"
   send_file(filepath, :filename => File.basename(filepath))
end

以及 javascript 中的以下 AngularJS：

$http.post('/api/s3/download/')
  .then(function(response) {
    var blob = new Blob([response.data]);
    var objectUrl = URL.createObjectURL(blob);
    const anchor = angular.element('<a></a>');
    anchor.attr('href', objectUrl);
    anchor.attr('download', source);
    anchor.css('display', 'none');
    angular.element(document.body).append(anchor);
    anchor[0].click();
  }, function(error_msg) {
    console.log(error_msg);
  });

我在 Ruby 中尝试了以下方法来获取 S3 对象作为 StringIO 其中source 是 S3 对象键：

s3 = Aws::S3::Resource.new
bucket = s3.bucket('my_bucket')
data = bucket.object(source).get

然后我尝试返回 data.body 作为对 javascript 的响应，但没有奏效。

如何获取 StringIO 对象并将其作为八位字节流发送到浏览器而不将文件具体化到磁盘？

【问题讨论】：

标签： angularjs ruby amazon-web-services amazon-s3 sinatra

【解决方案1】：

我通过使用以下端点使其工作：

get '/api/s3/download' do
  source = params[:source]
  headers['Content-Type'] = 'application/octet-stream'
  headers['Content-Disposition'] = "attachment; filename=#{source}"
  stream do |out|
    s3.client.get_object(bucket: 'my_bucket', key: source) do |chunk|
      out << chunk
    end
    out.flush
  end
end

在 Javascript 前端执行以下操作会在浏览器中打开一个新选项卡，通过该选项卡进行下载：

$window.open('/api/s3/download?source=' + source), '_blank');

【讨论】：