Angular上传FormData文件至VB.NET后端丢失问题求助

问题根源 #

1. 前端手动设置请求头错误：发送FormData时，Angular的HttpClient会自动生成包含boundary的multipart/form-data请求头，手动设置会丢失关键的boundary信息，导致后端无法正确解析表单数据。
2. 后端获取文件的方式错误：上传的文件不属于Request.Form集合，需要从Request.Files中读取。
3. 参数名不匹配：前端追加的类型参数名为type，后端代码中却用fileType获取，导致该字段值也无法正常读取。

修正步骤 #

1. 前端服务代码修正 #

移除手动设置的Content-Type，让HttpClient自动处理请求头：

packShipFileUpload(fileName: string, fileType: string, file: File){

  let formData: FormData = new FormData();
  formData.append('file', file);
  formData.append('fileName', fileName);
  formData.append('type', fileType);

  // 无需手动设置Content-Type，HttpClient会自动生成带boundary的请求头
  return this._http.post('/DataGetter/UploadFile', formData);
}

2. 后端VB.NET代码修正 #

从Request.Files获取文件，同时修正参数名匹配问题：

Public Function UploadFile() As String

    Dim fileName = HttpContext.Request.Form.Item("fileName")
    ' 匹配前端的参数名type
    Dim fileType = HttpContext.Request.Form.Item("type")
    ' 从Files集合读取上传的文件
    Dim file = HttpContext.Request.Files("file")

    ' 示例：将文件保存到服务器
    If file IsNot Nothing AndAlso file.ContentLength > 0 Then
        Dim savePath = Server.MapPath("~/Uploads/" & fileName)
        file.SaveAs(savePath)
    End If

    Console.WriteLine($"文件名：{fileName}，文件类型：{fileType}，文件大小：{If(file IsNot Nothing, file.ContentLength, 0)}")

    Return "上传成功"
End Function

额外验证建议 #

• 打开浏览器开发者工具的Network标签，查看请求头确认Content-Type包含boundary（格式示例：multipart/form-data; boundary=----WebKitFormBoundaryXXXX）。
• 检查后端接口是否允许multipart/form-data类型请求，确保没有被拦截。

内容的提问来源于stack exchange，提问作者Mox_z