Javascript 正在分析内容类型为image/jpeg的HTTP响应
我目前正在开发我的第一个webapp,我的任务是从数据库加载一个图像,并将其发送到客户端进行显示。在服务器端,我需要Javascript 正在分析内容类型为image/jpeg的HTTP响应,javascript,ajax,express,Javascript,Ajax,Express,我目前正在开发我的第一个webapp,我的任务是从数据库加载一个图像,并将其发送到客户端进行显示。在服务器端,我需要 res.setHeader('Content-Type', pic.mimetype); res.sendFile(pic.path,{ root: __dirname }); 请求完成后,在Firefox控制台的网络选项卡中,我看到了附带图像的小缩略图及其类型(图像/jpeg)——因此图像确实被发送了 问题是,我不知道如何将客户端响应中接收到的数据转换为我可以读取的文件对象,
res.setHeader('Content-Type', pic.mimetype);
res.sendFile(pic.path,{ root: __dirname });
请求完成后,在Firefox控制台的网络选项卡中,我看到了附带图像的小缩略图及其类型(图像/jpeg)
——因此图像确实被发送了
问题是,我不知道如何将客户端响应中接收到的数据转换为我可以读取的文件对象,或者我可以将img
标记的src
设置为的路径。有人能告诉我怎么做吗?我好像到处都找不到我需要的东西
以下是我在客户机上的代码:
var formData = new FormData();
formData.append("myfile", file);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status == 200){
// I need some code here that will convert the response data to a File
// object or something that can eventually be displayed inside an HTML
//element.
document.dispatchEvent(new CustomEvent("displayImage", {'detail': xhr.responseText}));
}
};
xhr.open("PATCH","/picture",true);
xhr.send(formData);
解决了!显然,每当您将图像的src设置为某个URL时,就会执行GET请求。因此,为了检索您想要的图像,只需确保您有一个GET路由,该路由与服务器端src中的相同URL。这样,图像将被自动检索和显示。例如,如果您是/images中的images,请将src和GET-route URL设置为“/images”,然后在route方法中检索文件并将其作为响应发送。在将响应发送回客户端时,不要忘记将标题内容设置为图像的mime类型。这可能会在任何情况下对您有所帮助,我会查看此轨迹,即将图像表示为base64编码字符串。