Intereting Posts
Что потребляет меньше ресурсов и быстрее File.AppendText или File.WriteAllText хранит сначала в StringBuilder? Как отключить кнопку в WPF с использованием шаблона MVVM? ASP.Net Identity 2.0 AccessFailedCount не увеличивается Найти тип нулевых свойств через reflection Лучший способ запуска OnPropertyChanged Фиксация «Общая ошибка произошла в GDI +» при создании штрих-кода Как преобразовать FlowDocument в rtf Остановит ли оператор IF прекратить оценку, если он не прошел первое условие? Создайте действие , чтобы «установить» свойство, когда мне предоставляется выражение LINQ для «get», Является ли нулевой коалесцирующий stream операторов безопасным? Доступ запрещен в System.Diagnostics.Process.StartWithCreateProcess (ProcessStartInfo startInfo) Проверка того, является ли экземпляр экземпляра нумерованным перечислением в C # Windows.Forms.ListBox с ошибкой OwnerDrawVariable? MoveNext вместо фактического имени метода / задачи Принудительный class child для переопределения функции предка через родительский

Загрузите файл с MVC 5 в Angular 2

У меня есть опыт работы на C # backend и ASP.Net MVC. Теперь я делаю свою первую попытку на Angular 2. Это требует времени, но мне нравится большая часть этого. Теперь я застрял в простой загрузке файла.

Я прочитал все примеры, которые я нашел здесь в Stackoverflow, но я до сих пор не работаю над своим примером.

На стороне сервера у меня есть этот код C #:

public ActionResult DownloadPicture(long id) { var bytes = System.IO.File.ReadAllBytes("images\dummy.jpg"); return GetAttachement(bytes, "DummyFile.jpg"); } private ActionResult GetAttachement(byte[] bytes, string fileName) { var contentType = MimeMapping.GetMimeMapping(fileName); var contentDisposition = new System.Net.Mime.ContentDisposition { FileName = fileName, Inline = true }; Response.AppendHeader("Content-Disposition", contentDisposition.ToString()); return File(bytes, contentType); } 

На стороне клиента у меня есть этот код машинописного текста:

 public pictureDownload(id: number): void { let options = new RequestOptions({ search: new URLSearchParams("id=" + id) }); this.http.get(this.urlPictureDownload, options).subscribe((data: any) => { // var blob = new Blob([data._body], { type: "image/jpeg" }); // var url = window.URL.createObjectURL(blob); // window.open(url); }); } 

Запрос поступает на сервер. Массив загружается. Я думаю, моя проблема лежит на стороне клиента. Может кто-нибудь мне помочь?

    Что бы ни стоило, это не просто проблема с Angular2. Это, кажется, «проблема» с браузерами (или, возможно, спецификацией). Есть несколько различных вариантов, которые у вас есть с этим подходом, о котором я знаю.

    1. Как только bytearray будет возвращен в браузер, вы можете сделать что-то вроде этого: var pom = document.createElement('a'); pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data)); pom.setAttribute('download', 'PICTURENAME.jpeg'); pom.style.display = 'none'; document.body.appendChild(pom); pom.click(); document.body.removeChild(pom); var pom = document.createElement('a'); pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data)); pom.setAttribute('download', 'PICTURENAME.jpeg'); pom.style.display = 'none'; document.body.appendChild(pom); pom.click(); document.body.removeChild(pom);

    2. Другой подход, о котором я знаю, – создать файл на сервере по временному пути, а затем вернуть результат перенаправления пользователю с идентификатором, идентифицирующим этот файл (часто с идентификатором GUID), и иметь тот маршрут, который перенаправляется на возврат результат вашего файла.

    Если вы видите изображение в браузере для своего внутреннего URL-адреса приложения. Затем вы можете напрямую назначить его src из img в разметке компонента следующим образом:

    предположим, что вы объявляете поле с imgURL в компоненте и инициализируете его с помощью метода действий с фоновым изображением. то в разметке вы могли бы это сделать

     any message 

    Для всех будущих читателей я суммирую все это здесь. По предложению EsDF с предложением от peinearydevelopment у меня теперь есть рабочее решение. Указание responseType как ArrayBuffer в запросе было самой важной частью, и трюк загрузки был действительно полезен.

    Alt 1: Я думаю, что Кейси прав. По возможности самый простой способ – просто использовать простой тег ссылки, указывающий на ресурс сервера. Когда, как и в моем случае, это не вариант, любая из двух других альтернатив будет полезна.

    Alt 2: метод openPictureInNewWindow – простой и понятный подход. Недостатком является то, что он представит нечетный URL-адрес, который выглядит так: blob: http: // localhost / 037713d1-a8b9-4fe3-8c43-ee5998ffdc5d .

    Alt 3: другой метод downloadFile будет идти еще дальше и создать временный тег ссылки и использовать его для загрузки файла. Это будет для большинства пользователей, как обычный подход. Но это не похоже на «подход с угловым 2», манипулирующий DOM, но это более удобный для пользователя способ, поэтому пока это тот, который я буду использовать. Спасибо за хороший вклад!

     public pictureDownload(id: number) { let options = new RequestOptions({ search: new URLSearchParams("id=" + id), responseType: ResponseContentType.ArrayBuffer }); this.http.get(this.urlPictureDownload, options).subscribe((data: any) => { //this.openPictureInNewWindow(data._body, "image/jpeg"); this.downloadFile(data._body, "Screenshot_" + id + ".jpg", "image/jpeg"); }); } private openPictureInNewWindow(data: ArrayBuffer, contentType: string) { var blob = new Blob([data], { type: contentType }); var url = window.URL.createObjectURL(blob); window.open(url); } private downloadFile(data: ArrayBuffer, fileName: string, contentType: string) { var blob = new Blob([data], { type: contentType }); var url = window.URL.createObjectURL(blob); var link = document.createElement("a"); link.setAttribute("href", url); link.setAttribute("download", fileName); link.style.display = "none"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }