EXTJS中不使用filefield组件如何上传canvas捕获的视频帧图片到服务器

核心思路是将canvas中绘制的视频帧转为二进制对象，构造表单格式提交，全程不需要用到Ext.form.field.File组件，后端接收逻辑和普通表单上传图片完全一致。

步骤1：将Canvas内容转为Blob对象 #

你已经通过drawImage把视频帧绘制到canvas上了，优先使用toBlob方法导出二进制文件，性能比转base64更高：

// 替换为你自己的canvas元素实例
const canvas = document.getElementById('你的canvas元素ID');
// 导出为jpeg格式，第三个参数为图片质量0-1，可按需调整
canvas.toBlob(function(blob) {
  // 拿到Blob对象后执行上传逻辑
  uploadCapturedFrame(blob);
}, 'image/jpeg', 0.9);

如果有低版本浏览器兼容需求，也可以转base64格式，但文件体积会比Blob大1/3左右，非必要不推荐：
const base64Img = canvas.toDataURL('image/jpeg', 0.9);

步骤2：构造FormData提交请求 #

直接用ExtJS自带的Ajax方法提交构造好的表单数据即可：

function uploadCapturedFrame(blob) {
  // 构造FormData对象，格式和普通表单提交完全一致
  const formData = new FormData();
  // 第一个参数是后端接收的文件字段名，可自定义；第三个参数为上传的文件名
  formData.append('uploadFrame', blob, `video_capture_${Date.now()}.jpg`);

  Ext.Ajax.request({
    url: '你的后端上传接口地址',
    method: 'POST',
    rawData: formData,
    // 必须关闭Content-Type自动设置，让浏览器自动识别multipart/form-data边界
    headers: {
      'Content-Type': null
    },
    // 跨域需要带cookie时可开启，不需要则删除
    withCredentials: true,
    success: function(response) {
      const res = Ext.decode(response.responseText);
      // 上传成功后的业务逻辑
      console.log('上传成功', res);
    },
    failure: function(response) {
      console.error('上传失败，状态码：', response.status);
    }
  });
}

注意事项 #

• 如果使用的ExtJS版本较老，rawData不支持直接传FormData，可替换为binaryData: formData，或者直接用原生XMLHttpRequest提交，和ExtJS业务逻辑完全兼容
• 上传前如果需要压缩图片，可先调整canvas的宽高重绘之后再导出Blob，减少文件体积

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