使用Angular将文件上传到ASP.net Core API

JamTay317

我已经搜索了大约2天,并且有很多与此相关的帖子,但是我无法全神贯注于我想做的事情。

我想要的是:我想使用angular将一个文件上传到API,然后返回该文件夹中的文件。

我所拥有的:

[HttpPost]
        [Route("uploadFile/{regionName}/{propertyName}")]
        public async Task<IEnumerable<FileModel>> Post(ICollection<IFormFile> files, string regionName,string propertyName)
        {
            IEnumerable<FileModel> fileModels = null;
            var route = Path.Combine(_baseRoot, regionName, propertyName);
            PathCreator.CreateFolder(route, null);
            try
            {
                var file = files.FirstOrDefault();
                if(file == null)
                    throw new ArgumentException("File Cannot be null");
                var uploads = Path.Combine(route, file.FileName);

                using (var fileStream = new FileStream(uploads,FileMode.Create))
                {
                    await file.CopyToAsync(fileStream);
                }


                fileModels = FileFinder.GetFiles(route);
            }
            catch (Exception e)
            {
                throw new ArgumentException(e.Message);
            }
            return fileModels;
        }

AngularJs

viewModel.uploadFile = function () {

            let regionName = "TestRegion";
            let propertyName = "TestProperty";

            let data = viewModel.getFormData();

            let request = new XMLHttpRequest();
            request.addEventListener("progress", viewModel.updateProgressBar, false);
            request.addEventListener("load", transferComplete, false);

            viewModel.isUploading = true;
            request.open("POST", "/api/file/uploadFile/" + regionName + "/" + propertyName);
            request.send(data);
        }

    /*gets selected file converts to form data*/
    viewModel.getFormData = function() {
        var formData = new FormData();
        if (viewModel.file) {
            formData.append("myFile",viewModel.file);
        }
        return formData;
    }

怎么了

这使其进入API,并且我的文件每次都为空。我不知道为什么。

更新

更改angularJs之后:

    viewModel.uploadFile = function() {

        let regionName = viewModel.region.name;
        let propertyName = viewModel.property.name;
        let postUrl = "/api/file/uploadFile/" + regionName + "-" + propertyName;

        let formData = new FormData();
        if (viewModel.file) {
            formData.append("file", viewModel.file);
        }

        let request = new XMLHttpRequest();
       // request.addEventListener("progress", viewModel.updateProgressBar, false);
        request.addEventListener("load", transferComplete, false);

        viewModel.isUploading = true;


        request.open("POST", postUrl);
        request.setRequestHeader("Content-Type", "multipart/form-data");

        request.send(formData[0]);
    }

CS:

[HttpPost]
        [Route("uploadFile/{path}")]
        [Consumes("multipart/form-data")]
        public async Task<IActionResult> Post(IFormFile file, string path)
        {
            var formattedPath = FilePathFormatter.FormatFolder(path);
            var newPath = PathCreator.CreateFolder(_baseRoot,formattedPath);

            var size = file.Length;
               if (file.Length > 0)
                {
                    using (var stream = new FileStream(newPath,FileMode.Create))
                    {
                        await file.CopyToAsync(stream);
                    }
                }

            return Ok(new {size, newPath});
        }

请求标头

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:0
Content-Type:multipart/form-data
Cookie:.AspNetCore.Identity.Application=CfDJ8Jb7vPJ0S0dGnlF8mEfQj9lVY7ccwabgngMkzgRgijxfOqen20J0y2DkgaND5M-EtULRMv8Kun0dSchlF22T6faFlxcybpMs5PhwJ6lRznXHBAV7irCmufJu1NhRUfIvMwQBwj9dE862lPsuKUa3sNh9kUYJ6C2pjiGymMNP25NZfJKwJuMA2ewzD9iZnlk5x5E2UMzbhZH9f6Ks_VPLZ4MlNNerwiLV2mya1QaeOv9AXFi4DKOkEu64IfCNGocipF4wP-anP4FkAN1sZOXJcD52KSruxxoj3Yagl6miAZ1788tT-CBZVvgbSWBHOei7Qcm8BiDdMp6KxtQs30m-_MyrbSnMP2GG26rjDwqwsoXopjU7G3KjLu8lc8dOjZGCGLa2Yc5WF63zOis4_5CZdYwFugqA5Mg1qo8mI5xxoYZVOUR1lWbtV5H-MC2geOMH06B4s_OBt59ZP6IJfIDeKpzcDB-hBmC3EE6pW9-wVSmTwfklyMkR2dsWfrKVcQBcQKUXRhSE8YaL6UARqLXBPP9RTbMV8gybZ6SX3h1lGvsp60wW__cRbo6mKwnko-JH-FiO6ctJzI6ciETCOcaz2QSTMYZVIwEX9CYKR9VKw9MUAZCzFguJSYzSCUPCG8TXGr9MyR6HoMgqCpkHfwc522o; io=7RfOJO9stPcX4wFFAAAB
Host:localhost:57155
Origin:http://localhost:57155
Pragma:no-cache
Referer:http://localhost:57155/Files/Upload
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

一般的

Request URL:some url here
Request Method:POST
Status Code:500 Internal Server Error
Remote Address:[::1]:57155

要求有效载荷

------WebKitFormBoundaryhpPhzjBM0NH4f7IA--
亨宁斯特

我认为您的问题是表单中文件输入元素的名称必须与接收上载文件的操作方法参数名称匹配。

在您的示例中,action方法中的参数名称为,files但表单中的文件输入元素被命名为myFile重命名myFilefiles,它应该可以工作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将文件从Angular上传到ASP.NET Core Web API

将文件从Angular上传到ASP.NET Core

使用 ASP.NET Core Web API 将图像上传到 Cloudianary 时出现空文件错误

通过 Postman 将文件上传到 ASP.NET Core API 时出现错误 415

无法将文件从Angular 8上传到Asp.net Core 2.2

使用axios将Vue中的XML文件上传到ASP .NET Core

如何将图像从React上传到ASP.NET Core Web API?

为什么我的文件从Angular上传到.NET Core Web API无法正常工作?

Angular + core 如何将文件数组从 Angular 上传到 Dot Net Core

使用Asp.NET Core 3.1框架将文件上传到服务器时,如何使用IFormFile作为属性?

使用 Microsoft Graph 将 C# Asp.Net Core 中的文件上传到 Sharepoint/OneDrive,无需用户交互

如何从表单将2GB以上的大文件上传到.NET Core API控制器?

使用Asp.Net Core Web API文件上传的文件始终为null

将 Excel 文件从 React 上传到 C# ASP.NET Core 后端

将文件上传到Azure Blob时的ASP.NET Core内存消耗

如何将文件上传到 ASP.NET Core 控制器?

上传文件 .NET Core Web API 的问题

通过 API 发送/上传文件 - .Net Core

如何将文件以及数据从Angular上传到.NET Core

使用ASP.Net Core 2.0 Web API和React.js上传文件

如何使用其他表单控件(Angular 8)和asp.net core api上传图像

如何使用WEB API Dot net core实现文件上传?

使用AJAX将图像上传到ASP.NET Core应用

通过api将ASP.Net文件上传到保管箱?

将Asp.net Core API的结果传递给Angular

使用ASP.net Core Web API发送多个文件

使用HTTP GET流文件:ASP .NET CORE API

将ZipArchive与ASP.NET Core Web Api结合使用

使用Angular 2和.Net Core API下载文件