Web Api return 图片为 HttpResponseMessage 但 .ajax 调用没有下载

Question

我正在尝试下载图片

客户HTML代码：

$.ajax({
            url: 'http://localhost:17308/api/DownloadFile/10272',
            type: 'GET',
            dataType: 'json',
            success: function (data, textStatus, xhr) {
                console.log(data);
            },
            error: function (xhr, textStatus, errorThrown) {
                console.log('Error in Database');
            }
        });

上面的代码调用 Web API 很好，但我遇到了错误 --> console.log('Error in Database'); （根据我的 console.log 错误：

网络Api

签名

public HttpResponseMessage DownloadFile(long id)

返回代码：

result = new HttpResponseMessage(HttpStatusCode.OK);
var stream = new FileStream(path, FileMode.Open);
result.Content = new StreamContent(stream);
result.Content.Headers.ContentType = new MediaTypeHeaderValue(mime);
return result;

我是否需要将我的数据类型从 json 更改为其他类型（我想是）
还有什么其他方法可以解决此问题？

更新

I was trying this code for returning a jpeg it makes it to success, but never displays the image.

HTML:

<button type="button" id="Download" class="btn btn-primary">Download</button>    
<img id="test" alt="test" src="" />

Javascript:

var request = function () {
            var ajaxOptions = {};
            ajaxOptions.cache = false;
            ajaxOptions.url = "/api/DownloadFile/10272";
            ajaxOptions.type = "GET";
            ajaxOptions.headers = {};
            ajaxOptions.headers.Accept = "application/octet-stream"
            ajaxOptions.success = function (result) {
                console.log("start");
                $("#test").attr("src", "data:image/jpg;base64," + result);
                console.log("end");
            };
            ajaxOptions.error = function (jqXHR) {
                console.log("found error");
                console.log(jqXHR);
            };
            $.ajax(ajaxOptions);
        }

        $(function () {
            $('#Download').on('click', request);

        })

更新 2：

更改为此代码，现在可以使用了

public IHttpActionResult DownloadFile(long id)
{
    //code
     myBytes = File.ReadAllBytes(path);
     return Ok(myBytes);
}

Answer 1

在我将 Accept header 更改为 "application/octet" 并将数据类型留空之前，我遇到了同样的问题。返回的 jquery object 状态为 200 并返回数据但始终执行错误选项。我之前看到 jquery 数据类型或 Accept header 与 Web API 控制器返回的内容不匹配。错误响应中的 jqXHR object 实际上表明触发了一些错误，但我还没有找到导致该行为的 jquery 选项或 Web API 响应。

<button id="submit" class="btn btn-primary">submit</button> 
<img id="test" alt="test" src="" />

JavaScript

var request = function () {
var ajaxOptions = {};
ajaxOptions.cache = false;
ajaxOptions.url = "/api/question3api";
ajaxOptions.type = "GET";
ajaxOptions.headers = {};
ajaxOptions.headers.Accept = "application/octet-stream"
ajaxOptions.success = function (result) {
    console.log(result);
    $("#test").attr("src", "data:image/png;base64," + result);
};
ajaxOptions.error = function (jqXHR) {
    console.log("found error");
    console.log(jqXHR);
};
$.ajax(ajaxOptions);
}

$(function () {
 $('#submit').on('click', request);

})

Api 控制器

public class question3apiController : ApiController
{
    public  IHttpActionResult GetFile()
    {
        string FilePath = HttpContext.Current.Server.MapPath("~/images/images.png");
        byte [] myBytes = File.ReadAllBytes(FilePath);
        return Ok(myBytes);
    }
}

edited：实际上在阅读以下结果后，结果是有道理的。如果请求的数据类型设置为预期 JSON 但返回了其他格式，则会发生错误事件。

Ajax request returns 200 OK, but an error event is fired instead of success

Web Api return 图片为 HttpResponseMessage 但 .ajax 调用没有下载

Web Api return Image as HttpResponseMessage but .ajax call is not getting the download

c#

ajax

jquery

asp.net-web-api

asp.net-web-api2