Как можно реализовать функцию, в которой я буду хранить файл локально, и с фронта буду скачивать, используяю asp .net web api + react js?

Ссылка скопирована
C# React Веб-разработка
1 ответ

Не могу понять, как реализовать функционал. В asp .net web api я должен реализовать функционал. На бэке должен храниться файл, и а с фронта (react js) я должен буду вытягивать этот файл и скачивать. Каким образом можно это реализовать?

Дополнительно:

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

Ответы:

Этот вопрос - лучшая реклама последствий курсов.

Убедительная просьба сначала смотреть документацию, следом искать в гугле и уже после задавать такие вопросы.
Гугло магияКак мы получаем файлы с сервера? - domain.com/images/img.png
How to create download link.

  • Убедительная просьба сначала смотреть документацию, следом искать в гугле и уже после задавать такие вопросы.

    Самокритично.) У тебя, конечно, не самые глупые вопросы, но недавно за тебя смог найти ответ человек, который задаёт такие вопросы.)
    Если что, не пытаюсь оскорбить, просто позабавил этот круговорот.

  • WbICHA,
    Да, я уверен такое есть у многих, просто я в отличии от них не создаю левые аккаунты для таких вопросов) Мне нечего скрывать.

    Ответ там не был найден, я нашёл его сам намного раньше, даже указал в вопросе его, вопрос может и повторяет, но ответ на него точно не однозначный, поэтому я не согласен с тем, что за меня кто-то, что-то нашёл.

    Этот ответ не отмечен решением, вопрос был закрыт из-за дубликата, хотя по факту ответа на него нет, ошибка типов это какая-то абстрактная хрень

services.UseStatic() и помещаем файл в wwwroot. Вся магия.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Дмитрий К. Ответ

Для реализации функции, в которой вы будете хранить файл локально и с фронта будете его скачивать, используя ASP.NET Web API и React JS, вам потребуется выполнить следующие шаги:

1. Создайте ASP.NET Web API проект, который будет отвечать за хранение и предоставление доступа к файлу. Для этого создайте контроллер, который будет обрабатывать запросы от фронтенда.

2. В методе контроллера, отвечающем за загрузку файла, реализуйте сохранение файла на сервере. Для этого используйте класс `System.IO.File` для сохранения файла в нужную директорию на сервере.

3. Создайте метод контроллера, который будет отдавать файл на скачивание. Для этого используйте `FileResult` для возврата файла в ответе на запрос.

Пример кода для ASP.NET Web API контроллера:

public class FileController : ApiController
{
    [HttpPost]
    public IHttpActionResult UploadFile()
    {
        // Получаем файл из запроса
        var file = HttpContext.Current.Request.Files[0];
 
        // Сохраняем файл на сервере
        var filePath = Path.Combine(HttpContext.Current.Server.MapPath("~/Files/"), file.FileName);
        file.SaveAs(filePath);
 
        return Ok();
    }
 
    [HttpGet]
    public IHttpActionResult DownloadFile(string fileName)
    {
        // Получаем путь к файлу
        var filePath = Path.Combine(HttpContext.Current.Server.MapPath("~/Files/"), fileName);
 
        // Проверяем существование файла
        if (!File.Exists(filePath))
        {
            return NotFound();
        }
 
        // Возвращаем файл для скачивания
        return Ok(new FileStream(filePath, FileMode.Open));
    }
}

public class FileController : ApiController { [HttpPost] public IHttpActionResult UploadFile() { // Получаем файл из запроса var file = HttpContext.Current.Request.Files[0]; // Сохраняем файл на сервере var filePath = Path.Combine(HttpContext.Current.Server.MapPath("~/Files/"), file.FileName); file.SaveAs(filePath); return Ok(); } [HttpGet] public IHttpActionResult DownloadFile(string fileName) { // Получаем путь к файлу var filePath = Path.Combine(HttpContext.Current.Server.MapPath("~/Files/"), fileName); // Проверяем существование файла if (!File.Exists(filePath)) { return NotFound(); } // Возвращаем файл для скачивания return Ok(new FileStream(filePath, FileMode.Open)); } }

4. На стороне React JS создайте компонент, который будет отправлять запросы к вашему ASP.NET Web API для загрузки и скачивания файлов. Для этого используйте методы `fetch` или библиотеку `axios`.

Пример кода для React компонента:

class FileComponent extends React.Component {
    uploadFile = (file) => {
        const formData = new FormData();
        formData.append('file', file);
 
        fetch('http://your-api-url/uploadFile', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if(response.ok) {
                console.log('File uploaded successfully');
            }
        });
    }
 
    downloadFile = (fileName) => {
        fetch(`http://your-api-url/downloadFile?fileName=${fileName}`)
        .then(response => {
            if(response.ok) {
                // Скачиваем файл
                // Создаем ссылку для скачивания
                const url = window.URL.createObjectURL(new Blob([response.body]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', fileName);
                document.body.appendChild(link);
                link.click();
            }
        });
    }
 
    render() {
        return (
            <div>
                 this.uploadFile(e.target.files[0])} /&gt;
                <button> this.downloadFile('example.txt')}&gt;Download File</button>
            </div>
        );
    }
}

class FileComponent extends React.Component { uploadFile = (file) =&gt; { const formData = new FormData(); formData.append('file', file); fetch('http://your-api-url/uploadFile', { method: 'POST', body: formData }) .then(response =&gt; { if(response.ok) { console.log('File uploaded successfully'); } }); } downloadFile = (fileName) =&gt; { fetch(`http://your-api-url/downloadFile?fileName=${fileName}`) .then(response =&gt; { if(response.ok) { // Скачиваем файл // Создаем ссылку для скачивания const url = window.URL.createObjectURL(new Blob([response.body])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', fileName); document.body.appendChild(link); link.click(); } }); } render() { return ( <div> this.uploadFile(e.target.files[0])} /&gt; <button> this.downloadFile('example.txt')}&gt;Download File</button> </div> ); } }

Следуя этим шагам, вы сможете реализовать функцию, в которой вы будете хранить файл локально и с фронта будете его скачивать, используя ASP.NET Web API и React JS. Не забудьте настроить CORS (Cross-Origin Resource Sharing) для вашего ASP.NET Web API, чтобы разрешить запросы с фронтенда.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ Visual Studio Code Как лучше убрать тень у панели слева в VS Code? 1 ответ