将 react-native-signaturepad 输出转换为 formData？

Posted 2023-03-07

【中文标题】将 react-native-signaturepad 输出转换为 formData？

【英文标题】：convert react-native-signaturepad output to formData?

【发布时间】：2018-09-28 09:19:59

【问题描述】：

我需要将我的 react-native-signaturepad 输出作为图像上传到服务器。我已经尝试过以下代码

//this.state.base64 is signaturepad output
let  blob = new Blob([this.state.base64], type: 'image/png');
    alert(blob.size);
      var fd = new FormData()
      fd.append('file',blob,"Sign.png")
         let url="http://xxxxxx/xxxx/xxx/";
        fetch(url, 
          method: 'POST',
          headers:         
            'Content-Type': 'multipart/form-data'
          ,
          body: fd
        ).then(function (response) 
               alert("dfdfdfdfd")
        );

使用上面的代码我得到了

"多部分正文必须至少有一个部分"

错误请任何人帮我解决这个问题

谢谢

【问题讨论】：

您确定this.state.base64 是在您调用new Blob 时设置的吗？该错误使我相信 formData 主体为空，这表明您的 blob 可能未正确创建。我的另一个建议是尝试将 axios 用于您的发布请求，看看是否有任何不同。您还可以尝试使用 npmjs.com/package/b64-to-blob 之类的库来创建您的 blob，看看是否存在问题。

我正在获取 blob 大小值

我试过这个包 npmjs.com/package/b64-to-blob 这个抛出错误 "cannot fint variable atob"

您可以在此处查看解决方案以定义 atob：***.com/questions/23097928/… 我知道这似乎需要付出很多努力，但调试过程更需要尝试找出问题所在。然后您可以稍后重构。

【参考方案1】：

我认为由于Blob(blobParts\[, options\]) 支持的blobParts 类型是

Array 中的 ArrayBuffer、ArrayBufferView、Blob、DOMString 对象或任何此类对象的混合，它们将被放入 Blob。 DOMStrings 被编码为UTF-8。

因此，将base64 转换为 blob 的简单方法是使用 fetch api

let base64Url = // Your Base 64 URL

fetch(base64Url)
.then(res => res.blob())
.then(blob => //Use the blob here)

然后您可以根据需要执行其余操作。