Question

我尝试使用jQuery.ajax下载并显示从wcf服务返回的图像。我无法处理我收到的数据，而且我不确定原因。我尝试过很多东西，但似乎没什么用。

这里的服务：

    public Stream DownloadFile(string fileName, string pseudoFileName)
    {
        string filePath = Path.Combine(PictureFolderPath, fileName);
        if (System.IO.File.Exists(filePath))
        {
            FileStream resultStream = System.IO.File.OpenRead(filePath);
            WebOperationContext.Current.OutgoingResponse.ContentType = "application/x-www-form-urlencoded";
            return resultStream;
        }
        else
        {
            throw new WebFaultException(HttpStatusCode.NotFound);
        }
    }

这是我的ajax电话：

            $.ajax({
                type: "GET",
                url: apiURL + serviceDownloadFile.replace('{filename}', filename),
                headers: headers,
                contentType: "application/x-www-form-urlencoded",
                processData : false,
                success: function(response) { 
                    var html = '<img src="data:image/jpeg;base64,' + base64encode(response) +'">';
                    $("#activitiesContainer").html(html);
                },
                error: function (msg) {
                    console.log("error");
                    console.log(msg);
                }
            });

将网址放在<img>标记中会显示正确的图像，但由于该服务需要授权标题，因此该页面每次都要求我提供凭据。

所以我的问题是，如何处理响应数据，以便我可以显示它？使用btoa（）;在响应上显示错误：

字符串包含无效字符

感谢。

Answer 1

正如Musa所建议的那样，直接使用XMLHttpRequest就可以了。

            var xhr = new XMLHttpRequest();
            xhr.open('GET', apiURL + serviceDownloadFile.replace('{filename}', filename).replace('{pseudofilename}', fileNameExt), true);
            xhr.responseType = 'blob';
            xhr.setRequestHeader("authorization","xxxxx");

            xhr.onload = function(e) {
              if (this.status == 200) {
                var blob = this.response;

                var img = document.createElement('img');
                img.onload = function(e) {
                  window.URL.revokeObjectURL(img.src); // Clean up after yourself.
                };
                img.src = window.URL.createObjectURL(blob);
                document.body.appendChild(img);
              }
            };

            xhr.send();

jQuery.ajax从wcf服务获取图像并显示

1 个答案: