Question

我目前正在处理我的第一个webapp，我的任务是从数据库加载图像并将其发送到客户端进行显示。在服务器端，我做

res.setHeader('Content-Type', pic.mimetype);
res.sendFile(pic.path,{ root: __dirname });

请求已完成，在Firefox console的网络标签中，我看到附带图片的小缩略图及其type(image/jpeg)的响应 - 因此图像确实已发送。

问题是我不知道如何将客户端响应中的接收数据转换为我可以读取的File对象或我可以设置src的路径img标记为。谁能告诉我怎么做？我无法在任何地方找到我需要的东西。

这是我在客户端的代码：

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);

Answer 1

解决！显然，无论何时将图像的src设置为某个URL，都会执行GET请求。因此，为了检索您想要的图像，只需确保您的GET路由与服务器端src中的URL相同。这样，图像将被自动检索和显示。例如，如果你是图像在/ images设置src和GET路由url到＆＃34; / images＆＃34;然后在您的路由方法中，检索文件并将其作为响应发送。在将响应发送回客户端时，不要忘记将标题内容设置为图像的mime类型。

使用Content-Type解析HTTP响应：image / jpeg

1 个答案: