无法在 asp.net mvc 中显示来自 s3 存储桶的上传图像

Posted 2023-02-19

【中文标题】无法在 asp.net mvc 中显示来自 s3 存储桶的上传图像

【英文标题】：Unable to display upload images from s3 bucket in asp.net mvc

【发布时间】：2019-08-14 05:50:30

【问题描述】：

我尝试在 asp.net mvc 中显示来自 s3 存储桶的图像，我得到了 base64 编码的响应。但不在视图中显示图像

第一个图像是二进制编码，而不是 Base64。 所以我用这个转换成base64 函数_arrayBufferToBase64()

这是我的看法

   <img data-ng-src="data:image/jpeg;charset=utf-8;base64,str" 
   >  

这是我的 MVC 控制器

   [HttpGet]
    public ActionResult GetReadObject()
    
        string responseBody = "";
        try
        
            using (IAmazonS3 s3client = new AmazonS3Client(_awsAccessKey, _awsSecretKey, RegionEndpoint.USEast1))
            
                GetObjectRequest request = new GetObjectRequest
                
                    BucketName = _bucketName,
                    Key = keyName
                ;
                using (GetObjectResponse response = s3client.GetObject(request))
                using (Stream responseStream = response.ResponseStream)
                using (StreamReader reader = new StreamReader(responseStream))
                
                    string title = response.Metadata["x-amz-meta-title"];
                    Console.WriteLine("The object's title is 0", title);

                    responseBody = reader.ReadToEnd();
                
            

        
        catch (Exception ex)
        

        

        return Json(responseBody, JsonRequestBehavior.AllowGet);
    

这是我的控制器

app.controller('myCtrl', function ($scope, $http) 
 $http(
    method: 'GET',
    url: '/User/Dashboard/GetReadObject',
    responseType: 'arraybuffer'
   ).then(function (response) 
    alert("1");
    console.log(response);
    var str = _arrayBufferToBase64(response.data);
    $scope.getImage = str;
    alert(str);
    console.log(str);
    // str is base64 encoded.
,
   function (response) 
    console.error('error in getting static img.');
);


function _arrayBufferToBase64(buffer) 
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) 
        binary += String.fromCharCode(bytes[i]);
    
    return window.btoa(binary);

)

【问题讨论】：

为什么不直接从 S3 返回公共 URL？

【参考方案1】：

你应该试试

<img data-ng-src="data:image/jpeg;charset=utf-8;base64,getImage" 
   >

正如您在控制器中提到的，str 是一个简单的 javascript 变量，您不能在 View 中使用它。当您将 str 值分配给 $scope.getImage ($scope.getImage = str) 您可以在视图中使用 getImage 和角度表达式。