Загрузите файл, используя Web API Core и Angular 7 - PullRequest
Новая
       42

Загрузите файл, используя Web API Core и Angular 7

0 голосов
/ 03 апреля 2019

Я пытаюсь загрузить файл (изображение или PDF) с угловым, но безуспешно. Я сделал как ниже 

<a href="https://localhost:44344/UploadedFiles/IMG_20190314_205925_3be1d2b3-3bac-4184-8468-995d58d5ff80.jpg">Downlod image</a>

Это изображение открывается на той же вкладке, но не загружается.

Так что я подумал сделать это через Web API Core. Для этого я написал ниже код. 

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

            var path = Path.Combine(
                           _hostingEnvironment.ContentRootPath,
                           "UploadedFiles", filename);

            var memory = new MemoryStream();
            using (var stream = new FileStream(path, FileMode.Open))
            {
                await stream.CopyToAsync(memory);
            }
            memory.Position = 0;
            return File(memory, GetContentType(filename), 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>
            {
                {".pdf", "application/pdf"},
                {".png", "image/png"},
                {".jpg", "image/jpeg"},
                {".jpeg", "image/jpeg"},
            };
        }

Тогда я назвал этот API с Swagger, тогда он работает.

Но когда я сделал это с угловой 7, как показано ниже

HTML код 

 <button type="button" (click)="downloadFile(doc.documentName)">Download</button>

код файла component.ts 

 downloadFile(fileName: string) {
    this.documentService.downloadFile(fileName).subscribe((res: any) => {
      console.log(res);
    });

service.ts 

downloadFile(fileName: any) {
    return this.http.get(this.baseUrl + "Document/DownloadFile/" + fileName);
  }

Когда я запускаю свое приложение, нажимаю кнопку загрузки, функция API работает успешно, но в угловом режиме в консоли возникает ошибка, как показано ниже.

enter image description here

Где проблема? Я просто хочу, файл должен быть загружен по нажатию кнопки. пожалуйста, ведите меня.

1 Ответ

1 голос
/ 04 апреля 2019

Чтобы проще всего выполнить ваши требования, вы можете использовать <a href без вызова углового кода. 

<a href="https://localhost:44344/Document/DownloadFile/file name">Downlod image</a>

Генерация вышеуказанного URL с вашей собственной бизнес-логикой.

Обратите внимание, что над URL-адресом указан путь для действия DownloadFile вместо статических файлов в wwwroot более старых.

...