将base64编码PDF作为附件存入Cloudant后打开报错如何解决

算力阿峰

2026-9-2

问题根因

你的代码有3个直接导致PDF附件损坏、无法打开的问题：

fetch拉取文件时未做二进制读取校验：如果文件源跨域、或者服务端返回PDF时未正确声明Content-Type: application/pdf响应头，fetch会默认把响应内容按UTF-8文本解码，再调用r.blob()生成的Blob已经破坏了PDF的原始二进制结构，后续转出来的Base64本质是损坏文件的编码，Cloudant存储后自然无法正常解析打开。
Base64串处理不严谨：FileReader.readAsDataURL()在部分浏览器环境下返回的Data URL会自动插入换行、空格类的空白字符，你直接截取逗号后的内容传入，会导致Base64串包含不符合RFC4648标准的非法字符，不符合Cloudant对附件内容的格式要求。
Promise链存在时序隐患：你把doc变量定义在最外层作用域，发请求的回调没有依赖前序文档处理步骤的返回值，极端场景下会出现文档对象还没组装完成就发起请求的问题，传空值或不完整值也会导致附件异常。

修复方法

拉取文件时强制校验Blob类型，拿到响应后直接将Blob的MIME类型固定为application/pdf，避免二进制内容被错误转码。
截取Data URL中的Base64内容后，清除所有空白、换行类非法字符，保证传入Cloudant的是纯标准Base64串。
理顺Promise链式调用逻辑，每一步处理后的对象通过return传递给下一个回调，去掉外层的共享变量，避免时序问题。

修复后的完整代码如下：

function saveFile() {
  //fileName is from the input field model data
  const url = fileName;

  fetch(url)
    .then((r) => {
      if (!r.ok) throw new Error('文件拉取失败')
      return r.blob()
    })
    .then((b) => {
      // 强制修正Blob类型，避免MIME识别错误导致转码损坏
      const pdfBlob = new Blob([b], { type: 'application/pdf' })
      return getBase64(pdfBlob)
    })
    .then((dataUrl) => {
      const fileBase64 = dataUrl.split(",")[1].replace(/[\s\n\r]/g, ''); // 清除所有非法空白字符
      const name = url._rawValue.name;

      const doc = {
        _id: "testing::" + new Date().getTime(),
        type: "testing attachment",
        _attachments: {
          [name]: {
            content_type: "application/pdf",
            data: fileBase64
          }
        }
      };
      // 把组装好的doc传给下一个Promise链
      return doc;
    })
    .then((doc) => {
      return api({
        method: "POST",
        url: "/webdata",
        auth: {
          username: process.env.CLOUDANT_USERNAME,
          password: process.env.CLOUDANT_PASSWORD,
        },
        data: doc,
      })
    })
    .then((response) => {
      console.log("result: ", response);
      alert("Test has been submitted!");
    })
    .catch((e) => {
      console.log("e: ", e);
      alert(e);
    });
}

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

调整后你可以先在控制台打印处理后的fileBase64长度，和原始PDF文件的大小做比对（Base64编码后体积会比原文件大1/3左右），如果长度匹配说明编码内容完整，上传后Cloudant就能正常识别打开PDF附件。

内容的提问来源于stack exchange，提问作者Morgan Hayes