前端resize压缩图片上传AWS S3后 下载文件损坏如何解决

业务背景 #

为实现SEO优化，需要在前端压缩用户待上传的文件体积（出于UX体验考量，未采用直接限制文件大小拦截的方案）；选择前端处理是因为业务需要使用AWS S3的pre-signed URL（预签名URL）上传能力。

故障现象 #

现有压缩逻辑处理后的文件可在浏览器端正常预览，也可成功上传至S3存储桶，但后续重新下载该文件时，文件已损坏无法正常打开。

现有实现代码 #

process(event: any, imageInputElement: any, maxWidth: number): any {
  return new Promise<any>((resolve, reject) => {
    try {
      const file = event.target.files[0]
      console.log('🚀 ~ file: index.vue ~ line 143 ~ process ~ file', file)
      const fileSize = file.size
      if (fileSize < 100000) return
      if (!file) return
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function (event: any) {
        const src = event.target.result
        const canvas = document.createElement('canvas') as any
        const imgElement = document.createElement('img') as any
        imgElement.src = src
        imageInputElement.src = event.target?.result
        console.log(maxWidth)
        imageInputElement.onload = function (e: any) {
          const scaleSize = maxWidth / e.target.width
          canvas.width = maxWidth
          canvas.height = e.target.height * scaleSize
          const ctx = canvas.getContext('2d')
          ctx.drawImage(e.target, 0, 0, canvas.width, canvas.height)
          const compressPer = (data: number) => {
            const result = 10000000 / data
            if (Math.trunc(result) >= 100) {
              return 100
            } else if (Math.trunc(result) < 1) {
              return 1
            } else {
              return Math.trunc(result)
            }
          }
          const srcEncoded = ctx.canvas.toDataURL(
            e.target,
            'image/jpeg',
            compressPer(fileSize)
          )
          const result = new File([srcEncoded], `${file.name}`, {
            type: 'image/jpeg',
          })
          console.log(
            '🚀 ~ file: index.vue ~ line 186 ~ process ~ result',
            result
          )

          resolve(result)
        }
      }
    } catch (error: any) {
      reject(error)
    }
  })
},

函数入参说明 #

• event：文件输入框默认change事件对象，内部包含用户选择的源文件信息
• imageInputElement：用于渲染处理后图片的DOM元素
• maxWidth：传入函数的图片最大宽度限制参数

故障根因 #

核心问题共4个，其中第一个是导致文件损坏的直接原因：

1. 文件内容格式错误：canvas.toDataURL返回的是带data:image/jpeg;base64,前缀的base64编码字符串，不是图片二进制数据。代码直接将整个字符串传入File构造函数生成文件，导致文件开头是文本前缀而非JPEG标准二进制头。浏览器img标签原生支持解析Data URL地址所以本地预览正常，但S3存储的是纯文本内容，下载后自然无法作为图片打开。
2. 质量参数不符合规范：toDataURL第三个参数（图片质量）的规范取值范围是0-1，现有代码计算返回的是1-100的整数，不同浏览器对超出范围的参数处理逻辑不一致，会导致压缩结果异常。
3. 逻辑顺序错误：文件非空判断写在读取file.size之后，用户未选择文件时会直接抛出空指针错误；小于100KB的文件分支直接return，没有执行resolve/reject，会导致Promise永久挂起。
4. 事件绑定风险：代码在外部传入的预览DOM元素上绑定onload事件，用户多次选择文件时会重复绑定事件，引发内存泄漏和逻辑错乱，且内部创建的imgElement完全没有被使用，属于冗余代码。

修复后代码 #

process(event: any, imageInputElement: any, maxWidth: number): Promise<File> {
  return new Promise<File>((resolve, reject) => {
    try {
      const file = event.target.files[0]
      // 先做非空判断，避免空指针报错
      if (!file) {
        return reject(new Error('未选择有效文件'))
      }
      const fileSize = file.size
      // 小于100KB的文件不压缩，直接返回原文件，补全resolve逻辑
      if (fileSize < 100000) {
        // 预览原图
        imageInputElement.src = URL.createObjectURL(file)
        return resolve(file)
      }

      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function (event: any) {
        const src = event.target.result as string
        // 使用内部创建的img元素处理加载，不污染外部传入的预览DOM
        const imgElement = document.createElement('img')
        imgElement.src = src

        imgElement.onload = function () {
          const canvas = document.createElement('canvas')
          const ctx = canvas.getContext('2d')!
          // 等比缩放，原图宽度小于限制值时不做拉伸
          const scale = maxWidth / imgElement.width
          const targetWidth = scale < 1 ? maxWidth : imgElement.width
          const targetHeight = scale < 1 ? imgElement.height * scale : imgElement.height
          canvas.width = targetWidth
          canvas.height = targetHeight
          ctx.drawImage(imgElement, 0, 0, targetWidth, targetHeight)

          // 修正质量参数到0-1区间
          const getQuality = (originSize: number): number => {
            let quality = 10000000 / originSize / 100
            if (quality >= 1) quality = 0.92 // 最高质量设为0.92，平衡体积和清晰度
            if (quality < 0.1) quality = 0.1 // 最低质量不低于0.1，避免图片过糊
            return quality
          }

          const dataUrl = canvas.toDataURL('image/jpeg', getQuality(fileSize))
          // 核心修复：将Data URL转为合法的二进制数据
          const [meta, base64Data] = dataUrl.split(',')
          const mimeMatch = meta.match(/:(.*?);/)
          if (!mimeMatch) {
            return reject(new Error('图片格式解析失败'))
          }
          const mime = mimeMatch[1]
          const binaryStr = atob(base64Data)
          const u8Arr = new Uint8Array(binaryStr.length)
          for (let i = 0; i < binaryStr.length; i++) {
            u8Arr[i] = binaryStr.charCodeAt(i)
          }

          // 统一输出jpg格式文件
          const fileName = file.name.replace(/\.[^/.]+$/, '.jpg')
          const compressedFile = new File([u8Arr], fileName, { type: mime })
          
          // 预览压缩后的图片
          imageInputElement.src = URL.createObjectURL(compressedFile)
          resolve(compressedFile)
        }

        imgElement.onerror = () => reject(new Error('图片加载失败'))
      }
      reader.onerror = () => reject(new Error('文件读取失败'))
    } catch (error) {
      reject(error)
    }
  })
},

修复说明 #

• 核心修复了Data URL直接生成File的问题：拆分Data URL的前缀和base64内容，将base64解码为二进制Uint8Array后再生成文件，保证文件内容符合JPEG格式标准，上传S3后下载可正常打开
• 修正了压缩质量参数的取值范围，符合W3C规范要求，兼容所有主流浏览器
• 调整逻辑判断顺序，补全小文件分支的返回逻辑，避免空指针和Promise挂起问题
• 移除了外部预览DOM上的事件绑定，改用内部创建的img元素处理图片加载逻辑，避免事件重复绑定
• 增加了小图不拉伸的逻辑，避免小尺寸图片被强制放大变模糊
• 统一使用URL.createObjectURL生成预览地址，相比Data URL性能更好，占用内存更低

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