如何将本地PDF文件转换为base64？代码仅返回文件路径如何解决

问题根因 #

你通过import file from 'assets/PDFs/file.pdf'拿到的file本质是打包工具返回的静态资源访问路径字符串，并非PDF的二进制内容。你将该字符串传入File构造器后读取，最终得到的自然是路径文本的base64，而非PDF文件本身的base64。

解决方案 #

根据使用场景选择对应实现方式即可：

场景1：读取项目内置的静态PDF #

不需要提前import导入资源，直接通过fetch拉取路径对应的PDF二进制内容再转base64即可，代码如下：

// 填写静态PDF的实际访问路径
const pdfPath = 'assets/PDFs/file.pdf';

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

// 拉取PDF二进制内容
const pdfRes = await fetch(pdfPath);
const pdfBlob = await pdfRes.blob();
const base64Pdf = await getBase64(pdfBlob);

注意：如果是Vite项目，PDF放在public目录下时路径直接写/file.pdf即可；如果PDF存放在第三方域名，需要对应域名配置CORS允许跨域访问。

场景2：读取用户手动选择的本地PDF #

如果是用户通过文件选择框上传本地PDF的场景，直接读取input控件返回的File对象即可：

<!-- 页面DOM -->
<input type="file" id="pdfInput" accept="application/pdf">

const pdfInput = document.getElementById('pdfInput');
pdfInput.addEventListener('change', async (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

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

  const base64Pdf = await getBase64(selectedFile);
  console.log(base64Pdf);
})

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