Uniapp 图片 base64 与 file 互转

引言

在开发过程中，我们经常会遇到需要将图片转化为 base64 编码或将 base64 编码转化为图片文件的需求。本文将介绍如何在 Uniapp 中进行图片 base64 与 file 的互转操作。

图片转为 base64 编码

在 Uniapp 中，我们可以使用 uni.getFileSystemManager().readFileSync() 方法将图片文件转化为 base64 编码。以下是代码示例：

export default {
    methods: {
        chooseImage() {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    let tempFilePath = res.tempFilePaths[0];
                    let base64Image = uni.getFileSystemManager().readFileSync(tempFilePath, 'base64');
                    // 这里的 base64Image 即为转化后的 base64 编码
                }
            });
        }
    }
}

以上代码通过 uni.chooseImage() 方法选择了一张图片，并将其临时文件路径保存在 tempFilePath 变量中。然后，使用 uni.getFileSystemManager().readFileSync() 方法将图片文件转化为 base64 编码，转化后的结果保存在 base64Image 变量中。

base64 编码转为图片文件

在 Uniapp 中，我们可以使用 uni.getFileSystemManager().writeFileSync() 方法将 base64 编码转化为图片文件。以下是代码示例：

export default {
    methods: {
        saveImage() {
            let base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAABHNCSV...';
            let filePath = `${uni.env.USER_DATA_PATH}/image.png`;
            
            uni.getFileSystemManager().writeFileSync({
                filePath,
                data: base64Image.replace(/^data:.+;base64,/, ''),
                encoding: 'base64',
                success() {
                    // 图片文件保存成功
                },
                fail() {
                    // 图片文件保存失败
                }
            });
        }
    }
}

以上代码将一个 base64 编码保存在 base64Image 变量中。然后，使用 uni.getFileSystemManager().writeFileSync() 方法将 base64 编码转化为图片文件。需要注意的是，filePath 变量用于指定图片文件的保存路径，这里是用户数据目录下的 image.png 文件。

结语

本文介绍了在 Uniapp 中进行图片 base64 与 file 互转的方法，并给出了相应的代码示例。希望能帮助到大家。如有疑问，欢迎留言讨论。

本文来自极简博客，作者：星辰之舞酱，转载请注明原文链接：Uniapp 图片 base64 与 file 互转