Javascript 从AWS S3加载图像时获取响应头
我将图像存储在S3上,描述存储在元数据中,如下所示 在浏览器中直接显示图像时,如何检索响应标题?我尝试在img元素上查找onload事件,但找不到头。我还尝试了XMLHttpRequest,它可以获取响应中的标题,但我无法将responseText用作img src。最终我通过XMLHttpRequest找到并获取了图像,然后在自定义属性中将desc from headers设置为图像:Javascript 从AWS S3加载图像时获取响应头,javascript,html,ajax,amazon-s3,frontend,Javascript,Html,Ajax,Amazon S3,Frontend,我将图像存储在S3上,描述存储在元数据中,如下所示 在浏览器中直接显示图像时,如何检索响应标题?我尝试在img元素上查找onload事件,但找不到头。我还尝试了XMLHttpRequest,它可以获取响应中的标题,但我无法将responseText用作img src。最终我通过XMLHttpRequest找到并获取了图像,然后在自定义属性中将desc from headers设置为图像: function(image_path, img){ // Use a native XHR so
function(image_path, img){
// Use a native XHR so we can use custom responseType
var xhr = new XMLHttpRequest();
xhr.open("GET", image_path, true);
// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
// Obtain a blob: URL for the image data to draw it
var arrayBufferView = new Uint8Array( this.response );
var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
var imageUrl = URL.createObjectURL( blob );
img.src = imageUrl;
// Get the description from S3 metadata
var desc = this.getResponseHeader('x-amz-meta-description');
img.setAttribute('data-description', desc);
};
xhr.send();
}
如果您需要在加载图像之前或在不加载图像的情况下获取响应头,则可以使用头查询。执行此查询时,您将只接收头,如果您只需要自定义数据而不需要文件,则效率更高
$.ajax({url:imageUrl,type:"HEAD"}).always(function(data,content,xhr){
var desc = xhr.getResponseHeader('x-amz-meta-description');
console.log(desc)
});