Загрузка файлов с помощью angualrjs и abp шаблон с webapi

Question

Я использую веб-API ABP (ASP.NET Boilerplate) и angularjs для создания приложения SinglePageApplication. Я уже получил работу для вызова методов на стороне сервера через Angular и ABP Framework. Просто отправить JSON-данные легко, но я не знаю, как отправлять файлы.

Вот пример отправки JSON-данных:
Серверный код

public class PostAppService : ApplicationService, IPostAppService
{
    public LoginOutput Login(LoginInput input)
    {
        doSomeStuffHere();
    }
}

[DependsOn(typeof(AbpWebApiModule))]
public class SimpleTaskSystemWebApiModule : AbpModule
{
    public override void Initialize()
    {
        IocManager.RegisterAssemblyByConvention(Assembly.GetExecutingAssembly());

        DynamicApiControllerBuilder
            .ForAll<IApplicationService>(Assembly.GetAssembly(typeof(SimpleTaskSystemApplicationModule)), "tasksystem")
            .Build();
    }
}

Клиент-код

(function() {
    var app = angular.module('app');

    var controllerId = 'sts.views.authentication.login';
    app.controller(controllerId, [
        '$scope', '$location', 'abp.services.tasksystem.authentication',
        function ($scope, $location, authService) {
            var vm = this;

            vm.user = {
                username: '',
                password: ''
            };

            var localize = abp.localization.getSource('SimpleTaskSystem');

            vm.login = function () {
                abp.ui.setBusy(
                    null,
                    authService.login(
                        vm.user
                    ).success(function(response) {
                        displayLoggedInMessage();
                    })
                );
            };
        }
    ]);
})();

Я хотел бы сделать что-то вроде этого, но вместо отправки JSON-данных я хотел бы отправить изображение, выбранное через:

<input type="file"/>

Есть идеи?

Answer 1

Хороший способ добиться загрузки файла:

1. Создайте контроллер с именем UploadController из базового AbpController

2. Добавьте метод для загрузки файла. Давайте назовем это ProductPhoto

public JsonResult ProductPhoto(string comment, int productId)
        {
            try
            {
                if (!Request.Files.Any() || Request.Files[0] == null)
                {
                    return null;
                }

                var fileName = Guid.NewGuid();
                var uniqueFilePath = @"~\Upload\ProductPhotos\" + fileName;
                Request.Files[0].SaveAs(uniqueFilePath);

                //save your additional parameters such as comment, productId
                return Json(new
                {
                    Success = true,
                    FileName = fileName
                });
            }
            catch (Exception ex)
            {
                Logger.Error(ex.ToString);
                return Json(new
                {
                    Success = false
                });
            }
        }

3. На клиент отправьте отправить файл, используя jquery или угловой

vm.showProductPhotoUploadFileDialog = function () {
                var formData = = new FormData()
                formData .append("productId", vm.form.product.id);
                formData .append("formId", vm.form.id);
                if (vm.newProductPhoto.comment) {
                    formData .append("comment", vm.newProductPhoto.comment);
                }

                $('#productPhotoFileInput').click();
            };

4. После завершения загрузки получить результат с помощью обратного вызова

  vm.productPhotoUploaded = function (response) {
                if (!response.success) {
                    return;
                }

                vm.productPhotoFileName = response.fileName;
            };

5. На этом этапе у вас есть уникальное имя файла, созданное на сервере для этого файла. Теперь вы можете обновить свой клиентский объект. Или вы можете пойти на свои каскадные сбережения.

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

Answer 2

Для вашего интерфейса, пожалуйста, посмотрите на эту ссылку: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Я думаю, что для вашей серверной службы эта ссылка даст вам правильную идею: https://msdn.microsoft.com/en-us/library/ms227669(v=vs.140).aspx

Я надеюсь, что это поможет вам, удачи:)