uniapp 微信小程序base64流转图片

最新推荐文章于 2025-11-14 09:05:20 发布

原创最新推荐文章于 2025-11-14 09:05:20 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #uni-app #javascript

文章描述了一种在JavaScript中处理后端返回的Base64编码图片的方法，特别是如何将其转换为本地路径。在Vue项目中，通过引入自定义的`base64ToPath`函数，可以将Base64编码的PDF数据写入本地文件系统，然后使用uni-app或微信小程序的API打开该文件。这个过程涉及到Blob对象、文件目录操作以及不同平台的兼容性处理。

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

因为这次后端返回的图片并不是一个http地址，百度找了很久，在此记录

1，新建一个js文件

export function base64ToPath(base64) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            base64 = base64.split(',')
            var type = base64[0].match(/:(.*?);/)[1]
            var str = atob(base64[1])
            var n = str.length
            var array = new Uint8Array(n)
            while (n--) {
                array[n] = str.charCodeAt(n)
            }
            return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
        }
        var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        } else {
            reject(new Error('base64 error'))
        }
        var fileName = getNewFileId() + '.' + extName
        if (typeof plus === 'object') {
            var basePath = '_doc'
            var dirPath = 'uniapp_temp'
            var filePath = basePath + '/' + dirPath + '/' + fileName
            if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
                plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
                    entry.getDirectory(dirPath, {
                        create: true,
                        exclusive: false,
                    }, function(entry) {
                        entry.getFile(fileName, {
                            create: true,
                            exclusive: false,
                        }, function(entry) {
                            entry.createWriter(function(writer) {
                                writer.onwrite = function() {
                                    resolve(filePath)
                                }
                                writer.onerror = reject
                                writer.seek(0)
                                writer.writeAsBinary(dataUrlToBase64(base64))
                            }, reject)
                        }, reject)
                    }, reject)
                }, reject)
                return
            }
            var bitmap = new plus.nativeObj.Bitmap(fileName)
            bitmap.loadBase64Data(base64, function() {
                bitmap.save(filePath, {}, function() {
                    bitmap.clear()
                    resolve(filePath)
                }, function(error) {
                    bitmap.clear()
                    reject(error)
                })
            }, function(error) {
                bitmap.clear()
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            var filePath = wx.env.USER_DATA_PATH + '/' + fileName
            wx.getFileSystemManager().writeFile({
                filePath: filePath,
                data: dataUrlToBase64(base64),
                encoding: 'base64',
                success: function() {
                    resolve(filePath)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

2.在vue文件中引入

import { base64ToPath} from './base64src.js'

let result = 后端返回的base64流.replace(/[\r\n]/g, "");
let pdfBase64 = `data:application/pdf;base64,${result}`;

base64ToPath(pdfBase64)
						.then((path) => {
							uni.openDocument({
								filePath: path,
								success: function(FileRes) {
									uni.$u.toast('打开文件成功')
								},
								fail: (res) => {
									uni.$u.toast("打开文件失败");
								},
							});
						})
						.catch((error) => {
							console.error(error);
						});

您可能感兴趣的与本文相关的镜像

ACE-Step

音乐合成

ACE-Step