uppy.io 用于发送 base64 编码数据而不是指定文件输入答案

【问题标题】：uppy.io using to send base64 encoded data rather than specifying a file inputuppy.io 用于发送 base64 编码数据而不是指定文件输入
【发布时间】：2021-11-21 14:02:11
【问题描述】：

有没有办法使用 uppy.io 发送 base64 编码数据？我已经使用仪表板组件将它用于“软拷贝”文档上传，但似乎无法找到一种可以传递文件字节而不使用输入文件标签来提供要上传的数据的方法。

上下文：我有一个使用 JavaScript 组件访问本地扫描仪硬件的页面。它扫描，显示预览，一切正常。然后用户点击上传按钮将其推送到服务器，扫描组件将扫描输出为 base64 编码数据。我可以使用 XMLHttpRequest 将其发送到服务器，如下所示：

    var req = new XMLHttpRequest();
    var formData = new FormData();
    formData.append('fileName', uploadFileName);
    formData.append('imageFileAsBase64String', imageFileAsBase64String);
    req.open("POST", uploadFormUrl);
    req.onreadystatechange = __uploadImages_readyStateChanged;
    req.send(formData);

但我真的很想使用 uppy，因为扫描文件可能非常大，而且我可以获得可恢复的上传、漂亮的进度条等，而且我已经在后台设置了 tusdotnet 并准备好接收它。

所有的例子都依赖于输入标签，所以我真的不知道该采取什么方法。感谢您的任何指点。

【问题讨论】：

标签： uppy

【解决方案1】：

我最终想通了。在这里，以防它对其他人有用。您可以使用 fetch 转换 base64 字符串，然后将其转换为 blob，最后通过 addFile api将其添加到 uppy 文件中。

我参考了这篇文章： https://ionicframework.com/blog/converting-a-base64-string-to-a-blob-in-javascript/

下面的代码适用于我的设置，其中 tusdotnet 处理 tus 服务服务器端。

    var uppy = new Uppy.Core({
        autoProceed: true,
        debug: true
    })
        .use(Uppy.Tus, { endpoint: 'https://localhost:44302/files/' })
        .use(Uppy.ProgressBar, {
            target: '.UppyInput-Progress',
            hideAfterFinish: false,
        })

    uppy.on('upload', (data) => {
        uppy.setMeta({ md:'value' })
    })

    uppy.on('complete', (result) => {
         // do completion stuff
    })

    fetch(`data:image/jpeg;base64,${imageFileAsBase64String}`)
        .then((response) => response.blob()) 
        .then((blob) => {
            uppy.addFile({
                name: 'image.jpg',
                type: 'image/jpeg',
                data: blob
            })
        });

【讨论】：