如何使用JavaScript将相机拍摄的图片上传至服务器

下面提供两种生产环境常用的实现方案，可根据你的业务场景选择：

方案1：转为Base64直接上传 #

实现成本最低，适合分辨率较低、体积较小的照片场景。

• 调用canvas的toDataURL()方法将画布内容转为Base64字符串，可自定义图片格式和压缩质量：

  // 格式设为jpeg，压缩质量0.8（取值范围0-1，数值越高画质越好、文件体积越大）
  const base64Img = canvas.toDataURL('image/jpeg', 0.8)
  

• 直接将Base64字符串放入请求体中发送给后端即可，注意Base64默认带data:image/[格式];base64,前缀，后端可以直接解码，也可前端提前裁剪掉前缀减少传输体积。
• 前端请求示例：

  fetch('/your/upload/api', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      image: base64Img,
      filename: `photo_${Date.now()}.jpg`
    })
  })
  

注意：Base64编码会比原始二进制文件体积大33%左右，高清大尺寸照片不推荐用该方案。

方案2：转为Blob对象以FormData格式上传 #

性能更优，适合所有尺寸的照片，后端可以直接复用普通文件上传的处理逻辑，是更推荐的生产方案。

• 调用canvas的toBlob()方法将画布内容转为Blob二进制对象，同样可自定义格式和压缩质量
• 构造FormData实例模拟原生表单文件上传，后端无需额外适配
• 代码示例：

  canvas.toBlob(function(blob) {
    const formData = new FormData()
    // 第三个参数为文件名，后端可直接读取该字段
    formData.append('upload_file', blob, `photo_${Date.now()}.jpg`)
  
    fetch('/your/upload/api', {
      method: 'POST',
      body: formData
      // 不需要手动设置Content-Type头，浏览器会自动生成带boundary的正确值
    })
  }, 'image/jpeg', 0.8)
  

后端适配说明 #

• 接收Base64：拿到字符串后裁剪掉前缀，做Base64解码即可写入为图片文件
• 接收FormData：和普通<input type="file">表单上传的文件处理逻辑完全一致，无需额外适配。

内容的提问来源于stack exchange，提问作者A-fandino