node.js - 上传的文件在浏览器中显示base64数据

Question

我正在使用 couchdb 来存储需要在浏览器中显示的附件。

数据从 html 输入上传，然后在调用 saveDoc 时进行处理:

getFileData: function(file){
    var reader = new FileReader();
    return new Promise(function(accept, reject){
        reader.onload = (e) => {
            accept(e.target.result)
        };
        reader.readAsDataURL(file);
    })
},
saveDoc: function(name, type, filedata, url){
    console.log(filedata)
    var self=this
    return new Promise(function(accept, reject){
        self.getData(url).then(data => {
            var rev = data['_rev']
            console.log(url + ' is the url')
            console.log(name + ' is the filename')
            documentation.attachment.insert(url, name, filedata, type,
                                            { rev: rev }, function(err, body) {

                                                if (!err){
                                                    console.log(body);
                                                }
                                                else {
                                                    console.log(err)
                                                }
                                            })
        }).catch(err => {
            console.log(err)
        })
    })
},

从控制台上传时我没有收到任何错误。但是，当我导航到控制台中附件应位于的位置时，我看到一条浏览器消息，告诉我无法显示数据(对于 pdf/图像)，或者我看到一个如下所示的 base64 字符串:

data:image/png;base64,iVBOR...

当附件是 html 文档时。

(saveDoc 上记录的数据如下所示: 数据:application/pdf;base64，JVBER...)

我的 couchdb 管理中显示了正确的内容类型和合理的长度以及文件上的元数据，因此不存在明显的 header 问题。谁能想到这在浏览器中不起作用的任何其他原因吗？

编辑

为了提供更多详细信息，我在 Fauxton 中上传了一份 pdf 文件，该文件按预期工作并显示在浏览器中。然后，我使用 saveDoc 函数上传了相同的 pdf，它以某种方式为文档的长度添加了大量数据。

在 Fauxton 上传的版本:

  "_attachments": {
    "03_IKB-RH_FUB_mitDB.pdf": {
      "content_type": "application/pdf",
      "revpos": 5,
      "digest": "md5-tX7qKPT6b7Ek90GbIq9q8A==",
      "length": 462154,
      "stub": true
    }
  }

以编程方式上传的版本:

  "_attachments": {
    "03_IKB-RH_FUB_mitDB.pdf": {
      "content_type": "application/pdf",
      "revpos": 4,
      "digest": "md5-Zy8zcwHmXsfwtleJNV5xHw==",
      "length": 616208,
      "stub": true
    }
  }

Answer 1

特定._attachments{}成员的data属性应该是base64，而不是dataURL .

当您将文件转换为 dataURL 时，您确实会获得 Base64 编码的二进制文件，但带有特殊前缀。截断前缀，仅保存 Base64 编码的尾部。

基本上，要获得有效的 base64，您应该从 dataURL 编码字符串的开头删除 data:*/*;base64, 前缀。

UPD。深入研究后发现，.attachment.insert(url, name, filedata, type)方法接受二进制(不是base64)作为文件数据。要从 FileReader 获取二进制文件，应使用 fr.readAsArrayBuffer() 而不是 fr.readAsDataURL()。