uni-app FileReader() 更新版本后提示不存在

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.98

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：p40

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 操作步骤：
``` plaintext
const reader = new FileReader();
reader.readAsDataURL(res.tempFiles[0]);
reader.onload = (e)=>{
    //console.log(e.target.result)// e.target.result转换后的base64  
}

预期结果：

处理bug

实际结果：

处理bug

bug描述：

3.98版本
bug :ReferenceError: FileReader is not defined

caililin 1楼•6 天前

h5 端的方法，刚试了，可以的 <template>
<view class="content">
<button @click=“chooseImage()”>chooseImage</button>
</view>
</template>

sinazl 2楼•6 天前

华为真机测试有同样的问题 downloadFile success, res is, [Object] {“tempFilePath”:"_doc/uniapp_temp_1702393603260/download/DCDU(1).bin",“statusCode”:200,"err…} at pages/index/index.vue:371
23:06:48.911 TypeError: Cannot read property ‘FileReader’ of undefined
23:06:48.911 progress : , [Number] 100 at pages/index/index.vue:412

手机型号畅想60 Harmony OS 版本 3.0.0 HBuilderX 版本 3.98

ionicwang 3楼•6 天前

1楼正解，H5端的方法啊

nodeper 4楼•6 天前作者

app端要读文件，没方法可用了？打包app的不是内嵌js引擎的？

bupafengyu 5楼•6 天前

可以使用原生插件 https://ext.dcloud.net.cn/plugin?id=13162

bupafengyu 6楼•6 天前

这插件能读取文件流？我看方法就是返回个路径啊

ionicwang 7楼•6 天前

回复 busyfree: 我在插件里面增加了一个读取文件内容的方法，如果只是想获取图片的base64的话，可以直接用plus.io.resolveLocalFileSystemURL+plus.io.FileReader()方法

h691938207 8楼•6 天前

回复小葛: 音频文件能读取到么，我现在要读取到，然后取md5

ionicwang 9楼•6 天前

回复 3***@qq.com: 应该是没问题的，你用原生插件试一下就知道了

bupafengyu 10楼•6 天前

回复小葛: plus.io.FileReader对安卓高版本早就不行了

vueper 11楼•6 天前

本地文件读取不是基本能力吗咋还搞没了

itying888 12楼•6 天前

在 uni-app 中，FileReader 是浏览器提供的 API，用于读取文件内容。如果你在更新 uni-app 版本后遇到 FileReader 不存在的提示，可能是由于以下原因：

1. 运行环境问题

FileReader 是浏览器端的 API，如果你在非浏览器环境（如小程序、App 等）中使用它，可能会导致 FileReader 不存在。
在 uni-app 中，不同平台的运行环境不同，FileReader 可能在某些平台（如小程序、App）中不可用。

2. 平台兼容性

如果你在 uni-app 中开发跨平台应用，某些平台可能不支持 FileReader。例如，小程序环境没有 FileReader，需要使用平台特定的 API 来读取文件。

3. 代码错误

检查你的代码是否正确使用了 FileReader。例如，确保你在浏览器环境中使用它，并且没有拼写错误。

解决方案

1. 检查运行环境

在 uni-app 中，你可以通过 uni.getSystemInfoSync() 获取当前运行环境，并根据环境选择不同的文件读取方式。

const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'browser') {
    // 在浏览器环境中使用 FileReader
    const reader = new FileReader();
    reader.onload = function(event) {
        console.log(event.target.result);
    };
    reader.readAsText(file);
} else {
    // 在其他平台使用平台特定的 API
    uni.chooseFile({
        success(res) {
            const filePath = res.tempFilePaths[0];
            uni.getFileSystemManager().readFile({
                filePath: filePath,
                encoding: 'utf8',
                success(data) {
                    console.log(data);
                },
                fail(err) {
                    console.error(err);
                }
            });
        }
    });
}

2. 使用 `uni.chooseFile` 和 `uni.getFileSystemManager`

在非浏览器环境中，你可以使用 uni.chooseFile 选择文件，然后使用 uni.getFileSystemManager 读取文件内容。

uni.chooseFile({
    count: 1,
    success(res) {
        const filePath = res.tempFilePaths[0];
        uni.getFileSystemManager().readFile({
            filePath: filePath,
            encoding: 'utf8',
            success(data) {
                console.log(data);
            },
            fail(err) {
                console.error(err);
            }
        });
    }
});