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 / images），或者我看到一个如下所示的base64字符串：

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

当附件是html文档时。

（在saveDoc上记录的数据如下所示： data:application/pdf;base64,JVBER...）

我的couchdb管理员正在显示正确的内容类型以及合理的长度，并且文件中包含元数据，因此没有明显的标题问题。任何人都可以想到这可能不适用于浏览器吗？

修改

为了提供更多详细信息，我在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

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

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

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

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

上传的文件在浏览器

1 个答案: