Vue/Nuxt+.NET Core上传图片至S3：本地正常发布后文件损坏求助

从你的描述来看，本地环境正常但发布后图片上传损坏、体积变大，核心问题大概率出在前端请求头配置和后端流处理这两个环节，以下是针对性的修复方案：

一、前端代码修复（Vue/Nuxt） #

你的前端手动设置了"Content-Type": "multipart/form-data"，这是错误的！当使用FormData时，浏览器会自动生成包含boundary（分隔符）的正确Content-Type，手动设置会丢失这个关键的boundary，导致后端无法正确解析表单数据，最终读取到损坏的文件内容。另外，onUploadProgress里的this指向也有问题，需要用箭头函数保证指向Vue实例。

修改后的代码：

async onUpload() {
  this.isNew = true;
  this.showProgess = true;
  const file = new FormData();
  console.log(this.selectedFile.size);
  file.append("file", this.selectedFile, this.selectedFile.name);
  file.append("fileType", 0);
  
  try {
    const response = await this.$axios.$post(
      `${process.env.API_URL}/PlanImages`,
      file,
      {
        // 移除手动设置的Content-Type，让axios自动处理
        onUploadProgress: (progressEvent) => { // 箭头函数保证this指向当前Vue实例
          this.uploadPercentage = parseInt(
            Math.round((progressEvent.loaded * 100) / progressEvent.total)
          );
        }
      }
    );
    
    if (response.result.success) {
      this.uploadSuccess = true;
      this.saveDisable = false;
      this.uploadDisable = true;
      this.editedItem.fileUrl = response.result.fileURL;
      console.log(response);
    }
  } catch (error) {
    console.error("上传失败：", error);
  } finally {
    this.showProgess = false;
    console.log("上传请求完成");
  }
}

二、后端代码修复（.NET Core 2.1） #

你的后端存在几个潜在问题：

1. 将IFormFile复制到MemoryStream后，没有重置流的位置（Position = 0），可能导致上传到S3的是无效流内容；
2. 硬编码了Bucket名称，没有使用传入的bucket参数；
3. 直接使用IFormFile的原始流可以节省内存，避免不必要的复制操作。

修改后的代码：

public async Task<UploadPhotoModel> UploadPhoto(IFormFile file, string bucket)
{
    // 先校验文件有效性
    if (file == null || file.Length == 0)
    {
        return new UploadPhotoModel 
        { 
            Result = new UploadResult 
            { 
                Success = false, 
                Message = "无效的上传文件" 
            } 
        };
    }

    // 建议通过依赖注入注入AmazonS3Client，避免硬编码密钥（安全最佳实践）
    var client = new AmazonS3Client("accessKey", "accessSecret", Amazon.RegionEndpoint.CACentral1);
    // 使用Guid+文件扩展名生成唯一文件名，避免冲突
    var fileName = $"{Guid.NewGuid()}{Path.GetExtension(file.FileName)}";
    // 使用传入的bucket参数，若无则用默认值
    var targetBucket = string.IsNullOrEmpty(bucket) ? "your-default-bucket" : bucket;

    // 直接使用文件的原始流，无需复制到MemoryStream
    using (var fileStream = file.OpenReadStream())
    {
        var uploadRequest = new TransferUtilityUploadRequest
        {
            InputStream = fileStream,
            Key = fileName,
            BucketName = targetBucket,
            PartSize = 6291456, // 6MB分块大小
            CannedACL = S3CannedACL.PublicRead
        };

        var fileTransferUtility = new TransferUtility(client);
        await fileTransferUtility.UploadAsync(uploadRequest);
    }

    // 返回包含访问URL的成功结果
    return new UploadPhotoModel
    {
        Result = new UploadResult
        {
            Success = true,
            FileURL = $"https://{targetBucket}.s3.{Amazon.RegionEndpoint.CACentral1.SystemName}.amazonaws.com/{fileName}"
        }
    };
}

三、额外排查点 #

如果上述修复后仍有问题，可以检查以下几点：

• 确认后端发布环境的.NET Core版本确实是2.1，避免版本兼容性问题；
• 检查S3 Bucket的区域是否与代码中指定的CACentral1一致；
• 排查后端服务器的代理/防火墙是否篡改了multipart/form-data类型的请求体；
• 在后端打印file.Length，对比本地和生产环境的数值：如果生产环境数值明显偏大，说明前端发送的请求体已经损坏，重点排查前端请求配置。

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