带有文件对象的FormData在后端接收时不包含文件

Question

我正在开发一个用于以角度方式上传文件的小接口，并尝试将文件作为表单数据发送。但由于某种原因，该文件在后端似乎不存在。

选择文件后，我将其设置为当前文件，如下所示：

onFileChange(event){
    this.currentFile = event.target.files[0];
}

除此之外，还有用户填写的名称和类型输入，然后一旦填写表格，他们就可以提交表格。这是我的提交事件的代码：

onSubmit(){
    this.service.fileUpload(this.currentFileName, this.selectedFileType, this.currentFile).subscribe((rslt: any) => {
    alert('submitted!');
  })
}

onSubmit 函数调用服务 fileUpload 函数，传入名称、类型和文件。

在服务函数中，我创建表单数据并附加 3 个参数，如下所示：

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

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

  let f = formData.get('file'); // This is just me making sure that file is added to the formData

  debugger; //debugging to check formData values

  return this._http.post('/DataGetter/UploadFile', formData, {
    headers: { "Content-Type": "multipart/form-data" }
  });
}

在背面，我有一个用 vb.net 编写的端点，到目前为止看起来像这样：

    Public Function UploadFile() As String

        Dim fileName = HttpContext.Request.Form.Item("fileName")
        Dim fileType = HttpContext.Request.Form.Item("fileType")
        Dim file = HttpContext.Request.Form.Item("file")

        Console.WriteLine(fileName) //break point here and I inspect the form items.

        Return ""

    End Function

我已经运行了附加到浏览器和后端应用程序的调试器，甚至尝试在我的js中使用

formData.get('file')

从表单数据中获取文件对象，并且我已经验证该文件已添加到前端。由于某种原因，尽管后端总是完全缺少 formData 中的该项目。

我在 SO 上看到了其他几个似乎也有类似问题的问题，但我还没有找到有助于解决此问题的问题。

提前感谢您的帮助。

Answer 1

事实证明，这个问题与我从输入读取文件的方式有关。我只是像这样分配文件：

onFileChange(event){
    this.currentFile = event.target.files[0];
}

我修改了这个函数以利用 async/await 和 onload 事件。

async onFileChange(event){
    const reader = new FileReader();
    reader.onload = () => {
        this.currentFile = reader.result;
    }
    await reader.readAsDataUrl(event.target.files[0]);
}

这将获取字符串形式的文件数据。我能够删除字符串的第一部分（基本上是一个标签），字符串的其余部分是 base64 文件数据，我将其打包为 JSON 并发送到服务器进行处理。我将其发送到 C# 后端并转换为 byte[]，如下所示：

byte[] binData = Convert.FromBase64String(file);

然后将其作为图像保存到sql server。

我很抱歉没有发布更多的代码，但我已经做了许多额外的更改，以允许使用承诺进行多文件上传，并向处理除文件之外的其他数据的后端添加了更多内容。我认为这些更改与本文无关。我确实想至少在这里发布一些内容作为答案。

希望它可以为将来的人节省一些时间。