如何使用uppy.io直接上传base64编码数据而无需文件输入框

实现方案 #

Uppy 本身完全支持手动添加文件，不需要依赖input文件选择标签，核心操作是将base64编码转换为标准File对象后，通过Uppy的addFile API传入即可，可正常使用断点续传、进度展示等所有能力。

步骤1：将base64编码转换为File对象 #

先封装转换方法，把扫描得到的base64字符串、自定义文件名转换为浏览器标准File实例：

// base64转Blob
function base64ToBlob(base64Str, mimeType = '') {
  const byteCharacters = atob(base64Str.split(',')[1]);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  return new Blob(byteArrays, { type: mimeType });
}

// 转为File对象
const scanBlob = base64ToBlob(imageFileAsBase64String, 'image/png'); // 替换为实际的文件MIME类型
const scanFile = new File([scanBlob], uploadFileName, { type: 'image/png' });

步骤2：Uppy添加文件并触发上传 #

初始化Uppy并配置Tus插件后，直接调用addFile传入转换好的File对象，再调用upload方法即可：

import Uppy from '@uppy/core'
import Tus from '@uppy/tus'
import Dashboard from '@uppy/dashboard'

// 初始化Uppy，你之前已有的Dashboard配置可以保留
const uppy = new Uppy()
  .use(Dashboard, {
    target: '#uppy-dashboard',
    inline: true,
  })
  .use(Tus, {
    endpoint: '你的tusdotnet服务地址',
    // 可自定义元数据，和你之前FormData传的参数对应
    metaFields: ['fileName', 'customField']
  })

// 手动添加扫描得到的文件
uppy.addFile({
  source: 'scanner', // 自定义来源标识，可任意填写
  name: uploadFileName,
  type: 'image/png',
  data: scanFile, // 传入上面转换好的File对象
  meta: {
    fileName: uploadFileName,
    // 可追加其他你需要传递的自定义字段
  }
})

// 触发上传，也可以由用户点击Dashboard的上传按钮触发
uppy.upload()

注意事项 #

• 转换base64时注意匹配实际的文件MIME类型，扫描输出为JPG就填image/jpeg，PDF就填application/pdf
• 你后端的tusdotnet服务需要配置允许前端传递的自定义元字段，避免元数据被拦截

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