Question

我正在尝试执行文件上传功能，其中我的前端包含反应，服务器是 asp.net core 2 。我尝试了各种组合，但是我的代码无法正常工作（服务器端出现错误，很可能出现内容类型错误）。以下是前端和服务器的摘要：

反应代码为：

const formData: any = new FormData();<br />
formData.append("File",data[0]); // data[0] contains the file object<br/>
return axios.post(SAVE_ATTACHMENT_DATA, formData, 
    {headers: { 'Content-Type':'multipart/form-data' }}
  )
      .then(resp => {
        // 
      }, err => {
        // 
      })
  };

ASP.NET Core 2代码为：

[HttpPost]
[Route("upload")]
public async Task<IActionResult> Upload()
{
    var files = Request.Form.Files; // getting error here in "Form"
    FileUploadViewModel model = new FileUploadViewModel(); // model been defined in another file
    var file = model.File;

     if (file.Length > 0)
     {
         string path = Path.Combine(@"temp\", "uploadFiles");
         using (var fs = new FileStream(Path.Combine(path, file.FileName), FileMode.Create))
         {
             await file.CopyToAsync(fs);
         }

          model.source = $"/uploadFiles{file.FileName}";
          model.Extension = Path.GetExtension(file.FileName).Substring(1);
     }
            return BadRequest();
}

有人可以帮我吗？

Answer 1

您在执行操作时所要做的只是更新模型，因此显然不会与该模型相关联的任何文件上传，因为它是您手动创建的，而不是从发布数据中创建的。相反，您应该将模型作为操作的参数，然后使用那个实例，而不是创建自己的实例：

[HttpPost]
[Route("upload")]
public async Task<IActionResult> Upload(FileUploadViewModel model)

Answer 2

它应该像这样工作：

反应码

    const formData = new FormData();
    formData.append("file", data[0]);
    return axios.post(SAVE_ATTACHMENT_DATA, formData)

ASP.NET Core 2：

[HttpPost]
[Route("upload")]
public async Task<IActionResult> Upload(IFormFile file)
{

     if (file.Length > 0)
     {
         string path = Path.Combine(@"temp\", "uploadFiles");
         using (var fs = new FileStream(Path.Combine(path, file.FileName), FileMode.Create))
         {
             await file.CopyToAsync(fs);
         }

          model.source = $"/uploadFiles{file.FileName}";
          model.Extension = Path.GetExtension(file.FileName).Substring(1);
     }
     return BadRequest();
}

重要提示：React中的文件名必须与.NET Core方法中的参数名相同，否则IFormFile将为null。例如React中的formData.append('sameName', data[0]);和.NET Core中的IFormFile sameName。

使用react + asp.net core 2应用程序的文件上传不起作用

2 个答案: