如何将Blob对象作为文件传入ASP.NET MVC控制器并存储到AWS S3

问题描述 #

我借助filesaver.js成功下载了文件，相关前端代码如下：

var out = doc.getZip().generate({
  type: "blob",
  mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
}) //Output the document using Data-URI
console.log(out);
saveAs(out,"Details.docx");

控制台中可看到包含size、Type的Blob对象。我希望通过ASP.NET MVC将该文件存储到AWS S3 Bucket，尝试调用控制器的UploadDocument方法：

public ContentResult UploadDocument()
{
    string result = "";
    try
    {
        int fileCount = Request.Files.Count;
        HttpPostedFileBase PostedFile = Request.Files[0];
        string path = "Test" + "_" + PostedFile.FileName;

        using (IAmazonS3 s3client = new AmazonS3Client(_awsAccessKey, _awsSecretKey, RegionEndpoint.USEast1))
        {
            PutObjectRequest putObjectRequest = new PutObjectRequest
            {
                BucketName = _bucketName,
                CannedACL = S3CannedACL.PublicRead,
                Key = string.Format("FolderName/" + path),
                InputStream = PostedFile.InputStream
            };
            s3client.PutObject(putObjectRequest);
        }
        result = "Success";
    }
    catch(Exception ex)
    {
        result = ex.Message;

    }
    
    return Content(result);
}

但控制器中Request.Files.Count始终为0，请问如何解决？

问题原因 #

前端未将Blob对象以表单文件格式提交至后端，导致ASP.NET MVC无法识别Request.Files中的内容。

解决步骤 #

1. 修改前端代码，用FormData包装Blob并发送POST请求 #

保留原有下载逻辑的同时，添加上传请求代码，将Blob包装到FormData中：

var out = doc.getZip().generate({
  type: "blob",
  mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});

// 保留原有下载功能
saveAs(out, "Details.docx");

// 构建FormData，将Blob转为可识别的表单文件
const formData = new FormData();
// 参数依次为：后端接收的文件键名、Blob对象、文件名
formData.append("uploadFile", out, "Details.docx");

// 发送POST请求到控制器
fetch("/YourControllerName/UploadDocument", {
  method: "POST",
  body: formData
})
.then(response => response.text())
.then(result => {
  console.log("上传结果：", result);
})
.catch(error => {
  console.error("上传失败：", error);
});

2. 修正后端控制器代码 #

添加[HttpPost]特性明确接收POST请求，并增加文件存在性判断：

[HttpPost] // 必须添加该特性，确保接收POST请求
public ContentResult UploadDocument()
{
    string result = "";
    try
    {
        if (Request.Files.Count > 0)
        {
            HttpPostedFileBase PostedFile = Request.Files[0];
            string path = "Test" + "_" + PostedFile.FileName;

            using (IAmazonS3 s3client = new AmazonS3Client(_awsAccessKey, _awsSecretKey, RegionEndpoint.USEast1))
            {
                PutObjectRequest putObjectRequest = new PutObjectRequest
                {
                    BucketName = _bucketName,
                    CannedACL = S3CannedACL.PublicRead,
                    Key = string.Format("FolderName/{0}", path),
                    InputStream = PostedFile.InputStream
                };
                s3client.PutObject(putObjectRequest);
            }
            result = "Success";
        }
        else
        {
            result = "未接收到文件";
        }
    }
    catch(Exception ex)
    {
        result = ex.Message;
    }
    
    return Content(result);
}

3. 额外注意事项 #

• 将请求URL中的YourControllerName替换为实际控制器名称
• 若使用jQuery的$.ajax发送请求，需设置processData: false和contentType: false，避免FormData被错误解析：

$.ajax({
  url: "/YourControllerName/UploadDocument",
  type: "POST",
  data: formData,
  processData: false, // 禁止自动处理数据格式
  contentType: false, // 禁止设置默认Content-Type
  success: function(result) {
    console.log(result);
  }
});

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