如何通过vue.js表单在dotnet core Web API中上传文件

Question

我在dot-net核心中创建了一个文件上传Web API，我做了一些代码，但无法实现期望的目标。在这里，我放置了我执行的代码：

这是我的存储库功能：

public async Task<Guid> CreateSchoolsAsync(SchoolsCreateVm schoolsCreateVm)
    {
        if (_GpsContext != null)
        {
            string uniqFileNameImage = null;
            if (schoolsCreateVm.ImageUrl != null)
            {
                string uploadsFolder = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
                uniqFileName = Guid.NewGuid().ToString() + "_" + schoolsCreateVm.ImageUrl.FileName;
                string filePath = Path.Combine(uploadsFolder, uniqFileName);
                schoolsCreateVm.ImageUrl.CopyTo(new FileStream(filePath, FileMode.Create));
            }
            string uniqFileNameBanner = null;
            if (schoolsCreateVm.BannerUrl != null)
            {
                string uploadsFolder = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
                uniqFileNameBanner = Guid.NewGuid().ToString() + "_" + schoolsCreateVm.BannerUrl.FileName;
                string filePath = Path.Combine(uploadsFolder, uniqFileName);
                schoolsCreateVm.ImageUrl.CopyTo(new FileStream(filePath, FileMode.Create));
            }
            Schools schoolsEntity = new Schools()
            {
                ID = Guid.NewGuid(),
                Name = schoolsCreateVm.Name,
                BannerUrl = uniqFileNameBanner, // Here first image is going to upload
                ImageUrl = uniqFileNameImage , // Here second image is going to upload                   
            };

            await _GpsContext.School.AddAsync(schoolsEntity);
            await _GpsContext.SaveChangesAsync();

            return schoolsEntity.ID;
        }
        return Guid.Empty;
    }

以下是存储的实体表：

public partial class Schools
{
    public Guid ID { get; set; }
    public string Name { get; set; }
    public string BannerUrl { get; set; }
    public string ImageUrl { get; set; }
}

现在，我创建了一个视图模型：

 public class SchoolsCreateVm
{
    public string Name { get; set; }
    public IFormFile BannerUrl { get; set; }
    public IFormFile ImageUrl { get; set; }
}

JSON输出如下：

{
  "name": "string",
  "bannerUrl": {}, // Here the value is showing object type so unable to send objec from the from. 
  "imageUrl": {} // Here the value is showing object type so unable to send objec from the from.
}

我的Vuejs表单如下：