使用 angualrjs 和带有 webapi 的 abp 样板上传文件答案

【问题标题】：Uploading files using angualrjs and abp boilerplate with webapi使用 angualrjs 和带有 webapi 的 abp 样板上传文件
【发布时间】：2017-12-12 18:08:44
【问题描述】：

我正在使用 ABP (ASP.NET Boilerplate) Web API 和 angularjs 来构建 SinglePageApplication。我已经可以通过 angular 和 abp 框架调用服务器端方法了。只发送 JSON 数据很容易，但我不知道如何发送文件。

以下是发送 JSON-Data 的示例：
Server-Code

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"/>

有什么想法吗？

【问题讨论】：

必须挂载一个FormData，然后通过$http.post发送。
服务器方法会是什么样子？它会得到哪个参数？
嗨Younk，你用ABP解决了吗？我现在处于同一点，但我还有解决方案

标签： angularjs asp.net-web-api single-page-application boilerplate asp.net-boilerplate

【解决方案1】：

实现上传文件的好方法：

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

在此步骤中，您将在服务器上为该文件生成唯一的文件名。现在您可以更新您的客户端对象。或者，您可以继续进行级联储蓄。

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

【讨论】：