.Net Core+Vue3下载PNG/JPG图片无法打开问题求助

下载PNG/JPG图片时，文件能正常下载但无法打开，怀疑与TypeScript保存文件的方式或Content Header类型有关。

• 后端：.Net Core 6.0 Web API
• 前端：Vue 3

现象：

• 下载后的图片打开时提示文件损坏或格式不支持
• Fiddler追踪显示服务器返回了二进制数据，响应包含Content-Disposition和Content-Type头部

前端TypeScript下载代码 #

await someService
.download(item.url, item.name)
.then(async (r: any) => {
  const blob = new Blob([r.data]);
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  const disposition = r.request.getResponseHeader("Content-Disposition");
  if (disposition && disposition.indexOf("attachment") !== -1) {
    const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
    let matches = filenameRegex.exec(disposition);
    if (matches != null && matches[1]) {
      link.download = matches[1].replace(/['"]/g, "");
    }
  }
  link.click();
  URL.revokeObjectURL(link.href);
})
.catch((err: any) => {
  showError(err);
});

后端.NET Core响应代码 #

public IActionResult DownloadAttachmentAsync([FromQuery] DownloadAttachmentInputDto model)
{
    try
    {
        FileStream fs = new FileStream(_pathToFile, FileMode.Open);
        return File(fs, "image/png", model.FileName);
    }
    catch (Exception err)
    {
        _errorHandler.Error(_loggedInUser, err);
        return BadRequest(_errorHandler.UserFriendlyErrorMessage(err));
    }
}

核心问题 #

1. 前端请求未设置响应类型：默认情况下请求会把二进制图片数据解析为JSON字符串，转成Blob时损坏文件结构。
2. Blob创建未指定MIME类型：浏览器默认按文本格式处理Blob，导致图片无法被识别。
3. 后端Content-Type固定为image/png：如果下载JPG文件，Content-Type不匹配会导致打开失败。

修复步骤 #

1. 前端修改请求与Blob创建逻辑 #

第一步：设置请求的responseType

确保下载请求配置responseType: 'blob'，让Axios直接返回二进制Blob数据：

// 假设someService.download是Axios封装，修改请求配置
download(url: string, name: string) {
  return axios.get(url, {
    responseType: 'blob', // 关键配置
    params: { fileName: name }
  });
}

第二步：创建Blob时指定正确的MIME类型

从响应头获取Content-Type，传给Blob构造函数：

await someService
.download(item.url, item.name)
.then((r: any) => {
  // 从响应头获取图片的MIME类型
  const contentType = r.headers['content-type'] || 'image/png';
  // 指定Blob类型
  const blob = new Blob([r.data], { type: contentType });
  
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  
  // 文件名解析逻辑保留，添加fallback
  const disposition = r.headers['content-disposition'];
  if (disposition && disposition.indexOf("attachment") !== -1) {
    const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
    let matches = filenameRegex.exec(disposition);
    if (matches != null && matches[1]) {
      link.download = matches[1].replace(/['"]/g, "");
    }
  } else {
    link.download = item.name;
  }
  
  link.click();
  URL.revokeObjectURL(link.href);
})
.catch((err: any) => {
  showError(err);
});

2. 后端动态设置Content-Type #

根据文件扩展名返回对应MIME类型，避免固定为image/png：

public IActionResult DownloadAttachmentAsync([FromQuery] DownloadAttachmentInputDto model)
{
    try
    {
        var fileInfo = new FileInfo(_pathToFile);
        var contentType = GetContentType(fileInfo.Extension);
        
        using FileStream fs = new FileStream(_pathToFile, FileMode.Open);
        return File(fs, contentType, model.FileName);
    }
    catch (Exception err)
    {
        _errorHandler.Error(_loggedInUser, err);
        return BadRequest(_errorHandler.UserFriendlyErrorMessage(err));
    }
}

// 映射扩展名到MIME类型的辅助方法
private string GetContentType(string extension)
{
    return extension.ToLower() switch
    {
        ".png" => "image/png",
        ".jpg" or ".jpeg" => "image/jpeg",
        ".gif" => "image/gif",
        _ => "application/octet-stream"
    };
}

额外排查点 #

• 检查下载后的文件大小是否与服务器原文件一致，若差距大说明数据传输/处理时损坏，优先排查responseType配置。
• 确认后端是否启用Gzip压缩，若启用需确保Axios自动处理解压（默认会处理，自定义请求需手动解压）。

内容的提问来源于stack exchange，提问作者OverMars