uni-app 云数据库表内base64数据无法显示并报错

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 云数据库表内base64数据无法显示并报错

操作步骤：

  • 将二进制文件存储在数据库中，就会打不开这个表数据

预期结果：

  • 正常显示

实际结果：

  • 报错

bug描述：

App下载地址或H5网址：


Harmonyos Next教程
2 回复

你存的base64有多大？


在处理 uni-app 云数据库中的 base64 数据无法显示并报错的问题时，首先需要确保几个关键点：数据的正确存储、数据的正确读取、以及前端对 base64 数据的正确处理。以下是一个基本的代码案例，涵盖了从存储到显示 base64 数据的整个过程。

1. 存储 base64 数据到云数据库

假设我们有一个图片数据，首先将其转换为 base64 编码：

// 假设 imgFile 是图片文件的 File 对象
uni.getFileSystemManager().readFile({
    filePath: imgFile.path,
    encoding: 'base64',
    success: res => {
        const base64Data = 'data:image/png;base64,' + res.data; // 根据实际图片类型调整 MIME 类型
        // 存储到云数据库
        uniCloud.database().collection('images').add({
            data: {
                base64: base64Data
            }
        }).then(res => {
            console.log('存储成功', res);
        }).catch(err => {
            console.error('存储失败', err);
        });
    },
    fail: err => {
        console.error('读取文件失败', err);
    }
});

2. 从云数据库读取 base64 数据

uniCloud.database().collection('images').get().then(res => {
    const data = res.data;
    data.forEach(item => {
        console.log('Base64 数据:', item.base64);
        // 显示图片
        const imgElement = document.createElement('img');
        imgElement.src = item.base64;
        document.body.appendChild(imgElement); // 或者添加到其他 DOM 元素中
    });
}).catch(err => {
    console.error('读取数据失败', err);
});

3. 前端处理 base64 数据

在前端，如果 base64 数据无法显示，可能是因为数据格式问题或 DOM 操作错误。确保 base64 数据包含正确的 MIME 类型和编码信息，并且正确地设置为 img 标签的 src 属性。

4. 错误处理

如果报错，检查以下几点：

  • 数据完整性：确保 base64 数据在存储和传输过程中未被截断或修改。
  • 权限设置：检查云数据库的读写权限设置是否正确。
  • 编码问题：确认 base64 编码和解码过程中使用的字符集一致。
  • 前端环境：确保前端环境支持 base64 图片的显示，尤其是在某些特定的浏览器或平台上。

通过上述步骤，你应该能够解决 uni-app 云数据库中 base64 数据无法显示并报错的问题。如果问题依旧存在，请检查具体的错误信息以进行针对性的调试。

回到顶部