4

I am using ABP (ASP.NET Boilerplate) Web API and angularjs to build a SinglePageApplication. I already got it working to call the server side methods via angular and the abp framework. It is easy to just send JSON-data but I have no idea how to send files.

Here is an example of sending 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();
    }
}

Client-Code

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

I would like to do something like this but instead of sending JSON-Data I would like to send an image selected via:

<input type="file"/>

Any ideas?

4

1 回答 1

1

实现上传文件的好方法：

  1. 从基础 AbpController 创建一个名为 UploadController 的控制器

  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
                });
            }
        }
  1. 在客户端发送使用 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();
            };
  1. 上传完成后使用回调获取结果
  vm.productPhotoUploaded = function (response) {
                if (!response.success) {
                    return;
                }

                vm.productPhotoFileName = response.fileName;
            };
  1. 在此步骤中，您将在服务器上为该文件生成唯一的文件名。现在您可以更新您的客户端对象。或者你可以继续你的级联储蓄。

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

于 2017-06-21T04:02:27.263 回答