Как передать данные и изображение в "ASP.NET Core" веб-API с использованием Angular 2 (typescript)?

у меня есть код, который может передавать данные только в веб-API, но я хочу передать данные и изображение как в тот же запрос не в другом запросе используя угловой 2 + typescript и в ASP.Net Core Web API.

мой код для передачи данных в API:

Угловое Код:

   create(user) {
    return this.authHttp.post(this._baseUrl + 'user/', JSON.stringify(userData)).map((res: Response) => {
        return res;
    }).catch(this.configService.handleError);
}

код API:

    [HttpPost]
    public IActionResult Create([FromBody]UserModel user)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        //save user
        _userRepository.Add(user);
        _userRepository.Commit();

        return new OkObjectResult(user.UserId);
    }
8
angular asp.net-core asp.net-core-webapi typescript

2 ответов

Решение 1:

самый простой способ-отправить изображение как строку base64.

просто создайте простую функцию JavaScript, чтобы прочитать файл и преобразовать его в строку base64. Сделайте это перед отправкой файла-возможно onChange, после событие <input> сделает работу для вас.

затем вы можете сохранить его непосредственно в БД (или сохранить как файл на сервере, если вам нужно).

изображения сохраненная как строка base64 может быть отправлена обратно и отображена непосредственно браузером без дополнительных действий, например:

<img src="data:image/bmp;base64,[base64EncodedImageHere]" />


решение 2:

интерфейс:

если вы используете HTML5 и контроль загрузки файлов, просто установите кодировку формы как multipart/form-data:

<form method="post" enctype="multipart/form-data">

бэкэнд:

ваше свойство в модели должно иметь тип IFormFile, затем вы можете сохранить файл на сервер:

IFormFile file;

using (var fileStream = File.Create( [file path here] ))
{
    await file.CopyToAsync(fileStream);
    await fileStream.FlushAsync();
}
5

просто установите свою модель и опубликуйте / поместите ее через webapi, как вы привыкли делать. Я предполагаю, что у вас есть объект модели web-api, предоставляющий атрибуты для структурированных данных и изображения. обычно varbinary (max) в sql server.

в приведенном ниже фрагменте я делаю то, что вы просите с объектом "newattachment", который на самом деле является webapi-моделью.

для получения нового пустого объекта вложения я делаю GET first против webapi-модели, используемой для хранения изображений. На следующем этапе I задайте свойства этой модели, включая саму строку данных изображения ( закодированную в base64). Наконец, я ставлю / публикую, сохраняю объект в базе данных) Сторона Клиента: Угловой 2

         this.dataService.getRecord('MT_DOKUMENTATION', -1)
            .subscribe((data: any[]) => {
                if (data) {
                var newattachment: any = data;
                newattachment.dokumentation = this.attachmentdata.split("base64,")[1];
                this.dataService.saveRecord('MT_DOKUMENTATION', "id", newattachment)
                    .subscribe((data: any[]) => {
                        var newrec: any = data;
                        ...
                    },
                    error => {
                        console.log(error);
                    },
                    () => {
                        console.log('Image Save complete')
                    });
                });

серверная сторона (C#, Web API):

        // PUT: api/MT_DOKUMENTATION/5
        [ResponseType(typeof(void))]
        public async Task<IHttpActionResult> PutMT_DOKUMENTATION(int id, MT_DOKUMENTATION mT_DOKUMENTATION)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Entry(mT_DOKUMENTATION).State = EntityState.Modified;

            try
            {
                await db.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
               ...              
            }

            return Ok(mT_DOKUMENTATION);
        }
0