您如何 post 将图像文件发送到 asp.net 核心 5 中的 api 控制器？（415 错误）

Question

我正在尝试使用 entity framework.

在我的 ASP.net Core 5 Web 应用程序中实现 Filepond 图像上传器

我无法将上传的图片保存到服务器。

对 Api 控制器的 post 请求出错，出现 415“不支持的媒体类型”错误。

来自 Api 控制器构造函数的代码被命中，但 Create 方法中的代码没有被命中。

javascript 文件:

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement);

FilePond.setOptions({
    server: {
        url: "/SaveImage/",
        process: (fieldName, file, metadata, load, error, progress, abort) => {
            const formData = new FormData();
            formData.append(fieldName, file, file.name);
            formData.append("CaseId", "@Model.CaseId");

            const request = new XMLHttpRequest();

            request.open('POST', '/SaveImage/');

            request.upload.onprogress = (e) => {
                progress(e.lengthComputable, e.loaded, e.total);
            };

            request.onload = function () {
                if (request.status >= 200 && request.status < 300) {
                    load(request.responseText);
                }
                else {
                    error('Error during Image Upload');
                }
            };

            request.send(formData);

            return {
                abort: () => {
                    request.abort();
                    abort();
                }
            };
        }, 
    }
})

Api 控制器：

[Route("[controller]")]
[ApiController]
public class saveImageController : ControllerBase
{
    private readonly NoPainNoGameDbContext _context;

    public saveImageController(NoPainNoGameDbContext context)
    {
        _context = context;
    }

    [HttpPost]
    public async Task<ActionResult> Create([FromForm] Models.GameImage doc, [FromForm] List<IFormFile> files)
    {
        if (files != null && doc.CaseId != 0)
        { 
            foreach (var file in files)
            {
                doc.Guid = Guid.NewGuid().ToString();
                doc.ImageName = file.FileName.Split('.').FirstOrDefault();
                doc.FileType = file.FileName.Split('.').LastOrDefault().ToLower();
                doc.CreatedOn = DateTime.Now;
                doc.FileSize = file.Length;

                _context.GameImages.Add(doc);
                await _context.SaveChangesAsync();
            }

            return Ok(doc.Guid); 
        }
        else
        {
            return BadRequest("The file is null"); 
        }
    }
}

输入

    <input type="file" multiple class="filepond" id="imageUploader" name="files">

Answer 1

我以前从未使用过 FilePond，但我设法使用您提供的代码重现了您的问题。您需要做的就是在您的操作参数上使用 [FromForm] 属性，即

public async Task<ActionResult> Create([FromForm] Models.GameImage doc, [FromForm] List<IFormFile> files)

您没有提供您的 input[type='file'] 的外观，但它还应该具有与操作参数 files (List<IFormFile> files) 匹配的 name 属性，即你的 input[type='file] 应该有一个 name='files' 属性（如果它还没有的话）。

此外，我不建议将您的实体作为操作参数传递，随着项目的进展，它往往会出现问题。相反，您应该使用 DTO，什么是数据传输对象 (DTO)？

您如何 post 将图像文件发送到 asp.net 核心 5 中的 api 控制器？（415 错误）

how do you post an image file to an api controller in asp.net core 5? (415 error)

javascript

c#

asp.net-apicontroller

filepond

asp.net-core-5.0

您如何 post 将图像文件发送到 asp.net 核心 5 中的 api 控制器？ （415 错误）

how do you post an image file to an api controller in asp.net core 5? (415 error)

javascript

c#

asp.net-apicontroller

filepond

asp.net-core-5.0

您如何 post 将图像文件发送到 asp.net 核心 5 中的 api 控制器？（415 错误）