使用RestAPI向Azure Blob存储上传图片后返回文本的问题

问题原因 #

你在Angular代码中错误地将文件封装进了FormData对象，导致Azure Blob存储的是完整的multipart/form-data表单内容（包含boundary分隔符、文件描述头信息等），而非图片的原始二进制数据。这就是获取内容时看到带------WebKitFormBoundary文本的原因。

Postman能正常工作是因为你直接上传了文件的原始二进制数据，没有额外包裹FormData。

修复后的代码 #

移除FormData包装，直接上传文件本身（Angular的HttpClient会自动处理二进制数据传输）：

uploadFile(file: File, securedUrl: string) {
  const httpOptions = {
    headers: new HttpHeaders({
      'x-ms-blob-type': 'BlockBlob',
      'Content-Type': file.type // 建议带上，确保Blob的Content-Type正确
    })
  };

  // 直接传入File对象，无需FormData和FileReader
  this.http.put(securedUrl, file, httpOptions).subscribe(
    response => console.log('上传成功', response),
    error => console.error('上传失败', error)
  );
}

原代码的问题点 #

1. 多余的FormData：Azure Blob的Put Blob接口（通过SAS URL上传）接收原始二进制数据，不需要表单封装，FormData会把文件变成多段表单格式存储。
2. 无用的FileReader：代码中读取了文件的ArrayBuffer但并未使用，属于冗余操作。

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