Question

我正在使用ASP.NET Core和React JS。我是这两个平台的新手。我已经使用Axios来请求数据并从服务器获得响应。但是我没有从服务器请求图像或任何类型的文件。这次，我正在使用“下载”功能，在该功能中，用户将单击按钮并可以下载所需格式为.png，.jpg，.pdf的文件。我不了解服务器如何发送数据？我阅读了，我需要发送从blob格式转换的base64数据。但是不了解如何从客户端请求数据以及服务器如何为所需文件提供服务。在数据库中，我只存储了文件的地址，例如/images/img1.jpg。该文件实际上位于wwwroot / images文件夹中。我使用downloadjs进行下载，该下载正常运行，但是下载后，该图像不可读，因为它没有任何内容。

请任何人帮助我实现此功能。

Answer 1

首先，您需要API来下载诸如此类的数据

  public async Task<IActionResult> Download(string filename)  
  {  
      if (filename == null)  
          return Content("filename not present");  

      var path = Path.Combine(  
                     Directory.GetCurrentDirectory(),  
                     "wwwroot", filename);  

      var memory = new MemoryStream();  
      using (var stream = new FileStream(path, FileMode.Open))  
      {  
          await stream.CopyToAsync(memory);  
      }  
      memory.Position = 0;  
      return File(memory, GetContentType(path), Path.GetFileName(path));  
  } 

private string GetContentType(string path)  
    {  
        var types = GetMimeTypes();  
        var ext = Path.GetExtension(path).ToLowerInvariant();  
        return types[ext];  
    }  

    private Dictionary<string, string> GetMimeTypes()  
    {  
        return new Dictionary<string, string>  
        {  
            {".txt", "text/plain"},  
            {".pdf", "application/pdf"},  
            {".doc", "application/vnd.ms-word"},  
            {".docx", "application/vnd.ms-word"},  
            {".xls", "application/vnd.ms-excel"},  
            {".xlsx", "application/vnd.openxmlformats  
officedocument.spreadsheetml.sheet"},  
                {".png", "image/png"},  
                {".jpg", "image/jpeg"},  
                {".jpeg", "image/jpeg"},  
                {".gif", "image/gif"},  
                {".csv", "text/csv"}  
            };  
        }

然后下载这样的文件

axios({
  url: 'your url',
  method: 'POST',       // Worked using POST or PUT. Prefer POST
  responseType: 'blob', // important
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
});

参考link

如何使用ASP.NET Core 2.1和React JS创建下载功能？

1 个答案: