Question

我正在使用ABP（ASP.NET Boilerplate）Web API和angularjs来构建SinglePageApplication。我已经通过angular和abp框架调用服务器端方法了。发送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-Data，而是希望通过以下方式发送图像：

<input type="file"/>

有什么想法吗？

Answer 1

实现上传文件的好方法：

从基础创建一个名为UploadController的控制器 AbpController
添加上传文件的方法。我们将其命名为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
                });
            }
        }

在客户端上发送使用jquery或angular

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();
            };

上传完成后，使用回调

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

                vm.productPhotoFileName = response.fileName;
            };

在此步骤中，您将在服务器上为此文件生成唯一的文件名。现在您可以更新客户端对象。或者你可以继续节省成本。

注意：这种方法的一个缺点是;当用户上传文件然后取消主实体保存时，您必须手动处理以删除上传到服务器的临时文件。

使用带有webapi的angularjs和aspboilerplate上传文件

1 个答案: