Вступление
В этом руководстве мы узнаем, как загружать файлы, изображения или видео с помощью веб-API ASP.NET и React.js. React.js — это библиотека JavaScript с открытым исходным кодом, используемая для создания пользовательских интерфейсов, особенно для SPA. Он также используется для управления слоем представления для веб-приложений и мобильных приложений.
Предпосылки
- Базовые знания о React.js
- Visual Studio Code IDE должна быть установлена в вашей системе
- Visual Studio и студия управления SQL Server
- Узел и NPM установлены
- начальная загрузка
Создать проект React.js
Давайте создадим проект React.js, используя следующую команду:
Джава
xxxxxxxxxx
1
npx создать - reatc - загрузить файл приложения
Теперь откройте только что созданный проект в Visual Studio Code и установите Bootstrap с помощью следующей команды:
Джава
xxxxxxxxxx
1
npm install - сохранить загрузчик
Теперь откройте файл index.js и импортируйте Bootstrap.
Джава
xxxxxxxxxx
1
импорт 'bootstrap / dist / css / bootstrap.min.css' ;
Теперь установите библиотеку Axios с помощью следующей команды. Узнайте больше об Axios .
Джава
xxxxxxxxxx
1
npm install - сохранить аксиосы
Теперь перейдите в папку src и создайте новый компонент с именем fileupload.js и добавьте следующие строки в этот компонент.
Джава
xxxxxxxxxx
1
импорт React из 'реакции' ;
2
import { post } из 'axios' ;
3
Класс Fileupload расширяет React . Компонент {
4
конструктор ( реквизит ) {
5
супер ( реквизит );
6
это . состояние = {
7
файл : '' ,
8
};
9
}
10
async submit ( e ) {
11
эл . protectDefault ();
12
const url = `http : // localhost: 61331 / api / Uploadfiles / Uploadfile`;
13
const formData = new FormData ();
14
formData . append ( 'body' , this . state . file );
15
const config = {
16
заголовки : {
17
'content-type' : 'multipart / form-data' ,
18
},
19
};
20
обратный пост ( url , formData , config );
21
}
22
setFile ( e ) {
23
это . setState ({ file : e . target . files [ 0 ]});
24
}
25
render () {
26
возврат (
27
< div className = "container- liquid " >
28
< form onSubmit = { e => this . представить ( е )} >
29
< div className = "col-sm-12 btn btn-primary" >
30
Загрузка файла
31
</ div >
32
< h1 > Загрузка файла </ h1 >
33
< input type = "file" onChange = { e => this . setFile ( e )} />
34
< button className = "btn btn-primary" type = "submit" > Загрузить </ button >
35
</ form >
36
</ div >
37
)
38
}
39
}
40
экспорт по умолчанию Fileupload
Теперь откройте файл App.js и добавьте следующий код:
Джава
xxxxxxxxxx
1
импорт React из 'реакции' ;
2
импортировать логотип из ./logo.svg ;
3
import './App.css' ;
4
импорт Добро пожаловать из "./Welcome"
5
импортировать Fileupload из './upload'
6
function App () {
8
возврат (
9
< div className = "App" >
10
{ / * <Welcome> </ Welcome> * / }
11
< Fileupload > </ Fileupload >
12
</ div >
13
);
14
}
15
приложение по умолчанию для экспорта ;
Вам также может понравиться:
Backend Web API с C #: пошаговое руководство
Создать таблицу в базе данных
Откройте SQL Server Management Studio, создайте базу данных с именем «Сотрудник» и в этой базе данных создайте таблицу. Дайте этой таблице имя типа «Stotefiles».
SQL
xxxxxxxxxx
1
CREATE TABLE [dbo]. [Stotefiles] (
2
[Id] [ int ] IDENTITY ( 1 , 1 ) НЕ NULL ,
3
[File] [nvarchar] (max) NULL ,
4
CONSTRAINT [PK_Files] КЛЮЧЕВЫЙ КЛЮЧ
5
(
6
[Id] ASC
7
) С (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON , ALLOW_PAGE_LOCKS = ON ) ON [ПЕРВИЧНЫЙ]
8
) ВКЛ [ПЕРВИЧНЫЙ] TEXTIMAGE_ON [ПЕРВИЧНЫЙ]
9
ИДТИ
Создать новый проект веб-API
Откройте Visual Studio и создайте новый проект. 
Измените имя на FileuploadwithReact и нажмите кнопку ОК. 
Выберите Web API в качестве шаблона. 
Щелкните правой кнопкой мыши папку «Модели» в обозревателе решений и выберите «Добавить» >> «Новый элемент» >> «Данные». Нажмите кнопку «Модель данных объекта ADO.NET» и нажмите «Добавить».
Выберите EF Designer из базы данных и нажмите кнопку «Далее». 
Добавьте свойства соединения, выберите имя базы данных на следующей странице и нажмите OK. 
Проверьте таблицу флажок. Внутренние параметры будут выбраны по умолчанию. Теперь нажмите кнопку «Готово». 
Наша модель данных успешно создана.
Щелкните правой кнопкой мыши папку «Модели» и добавьте класс Response. Теперь вставьте следующий код в класс.
Джава
xxxxxxxxxx
1
Ответ общественного класса
2
{
3
публичная строка Status { get ; установить ; }
4
открытая строка Message { get ; установить ; }
5
}
Щелкните правой кнопкой мыши папку «Контроллеры» и добавьте новый контроллер. Назовите его как «Uploadfiles controller» и добавьте следующее пространство имен
Джава
xxxxxxxxxx
1
используя FileuploadwithReact . Модели ;
Создайте метод в этом контроллере для загрузки файла и добавьте следующий код в этот контроллер.
Джава
xxxxxxxxxx
1
используя Систему ;
2
используя систему . Коллекции . Универсальный ;
3
используя систему . IO ;
4
используя систему . Линк ;
5
используя систему . Сеть ;
6
используя систему . Net . Http ;
7
используя систему . Threading . Задачи ;
8
используя систему . Интернет ;
9
используя систему . Web . Http ;
10
используя FileuploadwithReact . Модели ;
11
Пространство имен FileuploadwithReact . Контроллеры
12
{
13
открытый класс UploadfilesController : ApiController
14
{
15
DB EmployeeEntities = новый EmployeeEntities ();
16
public async Task < объект > Uploadfile ()
17
{
18
пытаться
19
{
20
var fileuploadPath = "C: \\ Users \\ sanwar \\ Documents \\ Visual Studio 2017 \\ Projects \\ FileuploadwithReact \\ FileuploadwithReact \\ Files" ;
21
var provider = new MultipartFormDataStreamProvider ( fileuploadPath );
23
var content = new StreamContent ( HttpContext . Current . Request . GetBufferlessInputStream ( true ));
24
foreach ( var заголовок в Request . Content . Headers )
25
{
26
содержание . Заголовки . TryAddWithoutValidation ( header . Key , header . Value );
27
}
28
жду контента . ReadAsMultipartAsync ( поставщик );
29
строка uploadFFileName = провайдера . FileData . Выберите ( x => x . LocalFileName ). FirstOrDefault ();
30
string originalFileName = String . Concat ( fileuploadPath , "\\" + ( поставщик . Содержание [ 0 ]. Заголовки . ContentDisposition . FileName ). Trim ( новый Char [] { '"' })));
31
var filename = поставщик . Содержание [ 0 ]. Заголовки . ContentDisposition . FileName ;
32
if ( File . Exists ( originalFileName ))
33
{
34
Файл . Удалить ( originalFileName );
35
}
36
Файл . Переместить ( uploadFileName , originalFileName );
37
Stotefile sf = новый Stotefile ();
38
сф . Файл = имя файла ;
39
БД . Stotefiles . Добавить ( SF );
40
БД . SaveChanges ();
41
вернуть новый ответ
42
{
43
Статус = "Обновлен" ,
44
Сообщение = "Успешно обновлено"
45
};
46
}
47
поймать ( исключение ex )
48
{
49
вернуть новый ответ
50
{
51
Состояние = «Ошибка» ,
52
Сообщение = "Ошибка"
53
};
54
}
55
}
57
}
58
}
Теперь давайте включим Cors. Перейдите в Инструменты, откройте диспетчер пакетов NuGet, найдите Cors и установите пакет «Microsoft.ASP.NET.WebApi.Cors». Откройте Webapiconfig.cs и добавьте следующие строки.
Джава
xxxxxxxxxx
1
EnableCorsAttribute CORS = новый EnableCorsAttribute ( "*" , "*" , "*" );
2
конфиг . EnableCors ( CORS );
Теперь перейдите в код Visual Studio и запустите проект React.js с помощью команды npm start и загрузите файл.
Резюме
В этой статье мы узнали о загрузке файлов и изображений с помощью React.js и ASP.NET web API.