uni-app nvue 保存 base64 图片到本地失败

示例代码：

function message (data){  
    completeImageData.value = data.save_image_chunk;  
    console.log(completeImageData.value.length)  
    finishImage.value = true  
    const fs = uni.getFileSystemManager();  
    const filePath = `${plus.io.convertLocalFileSystemURL('file://')}/image.png`;  
    console.log(filePath)  

     fs.writeFile({  
            filePath: filePath,  
            data: data.save_image_chunk.replace(/^data:image\/\w+;base64,/, ""), // 移除前缀  
            encoding: 'base64',  
            success: (res) => {  
              console.log('图片保存成功:', res);  
              uni.showToast({  
                title: '图片保存成功',  
                icon: 'success'  
              });  
            },  
            fail: (err) => {  
              console.error('保存图片失败:', err);  
              uni.showToast({  
                title: '保存失败',  
                icon: 'none'  
              });  
            }  
          });}

操作步骤：

h5 发送 base64 文件 nvue 页面 webview 获取到base64 通过 getFileSystemManager 保存

预期结果：

保存到本地

实际结果：

保存失败 17:24:50.669 at <Index pageId=1 pagePath="pages/index/index" pageQuery={} > WARN 17:24:50.669 [JS Framework] Failed to invoke the event handler of “onPostMessage” on u-web-view (34): 17:24:50.669 ReferenceError: Can’t find variable: nativeFileManager __ERROR

bug描述：

报错了 webview 获取到base64 通过 @onPostMessage 获取到在 fs.writeFile 报错无法保存到本地。打开了 Camera&Gallery 权限

17:24:50.669 at <Index pageId=1 pagePath="pages/index/index" pageQuery={} > WARN 17:24:50.669 [JS Framework] Failed to invoke the event handler of “onPostMessage” on u-web-view (34): 17:24:50.669 ReferenceError: Can’t find variable: nativeFileManager __ERROR


| 项目信息           | 详细信息      |
|-------------------|--------------|
| 产品分类           | uniapp/App   |
| PC开发环境操作系统 | Mac          |
| PC开发环境版本号   | 14.3         |
| HBuilderX类型     | 正式         |
| HBuilderX版本号   | 4.36         |
| 手机系统           | iOS          |
| 手机系统版本号     | iOS 17       |
| 手机厂商           | 苹果         |
| 手机机型           | iPhone 15    |
| 页面类型           | nvue         |
| Vue版本            | vue3         |
| 打包方式           | 云端         |
| 项目创建方式       | HBuilderX    |

zlyuanteng 1楼•16 小时前

在uni-app中使用nvue保存base64图片到本地时，确实可能会遇到一些问题，特别是与原生模块交互时。以下是一个示例代码，展示了如何在nvue页面中实现将base64图片保存到本地。

首先，确保你的项目已经配置了必要的权限，比如在manifest.json中添加写入外部存储的权限（如果目标平台需要）：

"mp-weixin": { // 示例，针对微信小程序
    "requiredPrivateInfos": ["saveImageToPhotosAlbum"]
},
"app-plus": {
    "distribute": {
        "android": {
            "permissions": [
                "android.permission.WRITE_EXTERNAL_STORAGE"
            ]
        },
        "ios": {
            "plist": [
                "NSPhotoLibraryAddUsageDescription"
            ]
        }
    }
}

然后，在nvue页面中，你可以使用以下代码将base64图片保存到本地：

<template>
  <div>
    <button @click="saveImage">保存图片</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveImage() {
      const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'; // 你的base64图片数据
      const imagePath = '_doc/temp_image.png'; // 临时保存路径

      // 将base64转换为文件并保存
      plus.io.resolveLocalFileSystemURL('_doc/', entry => {
        entry.getFile(imagePath, {create: true, exclusive: false}, fileEntry => {
          fileEntry.createWriter(writer => {
            const blob = new plus.blob.Blob([this.base64ToArrayBuffer(base64Image.split(',')[1])], {type: 'image/png'});
            writer.write(blob);
            writer.onwriteend = () => {
              // 保存成功后，可以根据需要调用原生API保存到相册
              #ifdef APP-PLUS
              plus.io.resolveLocalFileSystemURL(imagePath, entry => {
                entry.file(file => {
                  const filePath = file.toLocalURL();
                  plus.runtime.saveImageToPhotosAlbum(filePath, res => {
                    if (res.code === 0) {
                      console.log('图片保存成功');
                    } else {
                      console.error('图片保存失败', res.msg);
                    }
                  }, err => {
                    console.error('保存图片到相册失败', err.msg);
                  });
                });
              });
              #endif
            };
          }, err => {
            console.error('创建写入器失败', err.msg);
          });
        }, err => {
          console.error('创建文件失败', err.msg);
        });
      }, err => {
        console.error('解析文件系统URL失败', err.msg);
      });
    },
    base64ToArrayBuffer(base64) {
      const binaryString = atob(base64);
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      return bytes.buffer;
    }
  }
}
</script>

注意：

#ifdef APP-PLUS 用于条件编译，确保代码只在App平台上执行。
plus.runtime.saveImageToPhotosAlbum 是5+ App（即HBuilderX生成的App）的API，用于将图片保存到相册。
base64ToArrayBuffer 方法用于将base64字符串转换为ArrayBuffer，这是写入文件所需的数据格式。