uni-app 使用FileReader读取文件显示“执行出错”

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

uni-app 使用FileReader读取文件显示“执行出错”

操作步骤：

plus.io.resolveLocalFileSystemURL("/storage/emulated/0/Download/QQ/test.json", function(entry) {
entry.file(function(file) {
let fileReader = new plus.io.FileReader();
fileReader.readAsText(file, 'utf-8');
fileReader.onerror = function(err) {
uni.showToast({
title: "读取文件失败",
icon: "none"
})
console.log("读取文件失败", err);
}
fileReader.onloadend = function(e) {
if (e.target.result && e.target.result.length !== 0) {
let importData = JSON.parse(e.target.result);
savePsdBatch(importData);
}
}
})
}, error => {
console.log("请求文件系统失败", error);
})

预期结果：

正确读取文件数据

实际结果：

{  
    "type": "error",  
    "bubbles": false,  
    "cancelBubble": false,  
    "cancelable": false,  
    "lengthComputable": false,  
    "loaded": 0,  
    "total": 0,  
    "target": {  
        "fileName": "/storage/emulated/0/Download/QQ/test.json",  
        "readyState": 2,  
        "result": null,  
        "error": {  
            "code": 10,  
            "message": "执行出错"  
        },  
        "onloadstart": null,  
        "onprogress": null,  
        "onload": null,  
        "onabort": null,  
        "onerror": "function() { [native code] }",  
        "onloadend": "function() { [native code] }"  
    }  
}

bug描述：

plus.io.resolveLocalFileSystemURL("/storage/emulated/0/Download/QQ/test.json", function(entry) {  
    entry.file(function(file) {  
        let fileReader = new plus.io.FileReader();  
        fileReader.readAsText(file, 'utf-8');  
        fileReader.onerror = function(err) {  
            uni.showToast({  
                title: "读取文件失败",  
                icon: "none"  
            })  
            console.log("读取文件失败", err);  
        }  
        fileReader.onloadend = function(e) {  
            if (e.target.result && e.target.result.length !== 0) {  
                let importData = JSON.parse(e.target.result);  
                savePsdBatch(importData);  
            }  
        }  
    })  
}, error => {  
    console.log("请求文件系统失败", error);  
})

执行代码触发以后显示“执行失败”

{  
    "type": "error",  
    "bubbles": false,  
    "cancelBubble": false,  
    "cancelable": false,  
    "lengthComputable": false,  
    "loaded": 0,  
    "total": 0,  
    "target": {  
        "fileName": "/storage/emulated/0/Download/QQ/test.json",  
        "readyState": 2,  
        "result": null,  
        "error": {  
            "code": 10,  
            "message": "执行出错"  
        },  
        "onloadstart": null,  
        "onprogress": null,  
        "onload": null,  
        "onabort": null,  
        "onerror": "function() { [native code] }",  
        "onloadend": "function() { [native code] }"  
    }  
}

【更新编译器版本前无异常！】

产品分类：

HTML5+

HBuilderX版本号：

4.36

手机系统：

Android

手机系统版本号：

Android 10

手机厂商：

小米

手机机型：

xiaomi8

打包方式：

云端


Harmonyos Next教程
2 回复

实测打包后作为App使用无异常 直接使用基座读取数据失败


在处理 uni-app 使用 FileReader 读取文件时遇到“执行出错”的问题，通常可能是由于文件路径不正确、文件权限问题或文件格式不支持等原因引起的。下面我将提供一个基本的代码示例，展示如何在 uni-app 中使用 FileReader 读取文件，并处理可能的错误。

首先，确保你已经在 manifest.json 中配置了必要的权限（如果涉及到文件系统访问），尽管在大多数现代浏览器和uni-app环境中，基本的文件读取权限通常是默认可用的。

代码示例

// 假设你有一个文件选择器组件，用户可以选择文件
<template>
  <view>
    <button @click="chooseFile">选择文件</button>
    <text>{{ fileContent }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileContent: ''
    };
  },
  methods: {
    chooseFile() {
      uni.chooseFile({
        count: 1, // 最多可以选择的文件个数
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          if (tempFilePaths.length > 0) {
            const filePath = tempFilePaths[0];
            this.readFile(filePath);
          }
        },
        fail: (err) => {
          console.error('选择文件失败:', err);
        }
      });
    },
    readFile(filePath) {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.fileContent = e.target.result;
      };
      reader.onerror = (e) => {
        console.error('读取文件出错:', e);
        this.fileContent = '读取文件出错';
      };
      // 尝试读取文件内容作为文本
      reader.readAsText(filePath); // 注意：这里需要传入File对象或Blob对象，但uni.chooseFile返回的是文件路径，需进一步处理
      // 由于uni-app的限制，直接传入filePath可能不适用，需要使用uni.getFileSystemManager()来获取文件内容
      // 正确的做法如下：
      const fs = uni.getFileSystemManager();
      fs.readFile({
        filePath: filePath,
        encoding: 'utf-8',
        success: (res) => {
          this.fileContent = res.data;
        },
        fail: (err) => {
          console.error('文件系统读取失败:', err);
          this.fileContent = '文件系统读取失败';
        }
      });
    }
  }
};
</script>

注意事项

  1. 在 uni-app 中，直接使用 FileReader 的 readAsText 方法可能不适用，因为 uni.chooseFile 返回的是文件路径而不是 File 或 Blob 对象。因此，我们使用 uni.getFileSystemManager() 来读取文件内容。
  2. 确保处理错误回调，以便在读取文件失败时能够给出适当的反馈。
  3. 根据实际需求调整文件读取的编码方式（如 ‘utf-8’、‘base64’ 等）。

通过上述代码，你应该能够正确读取文件并显示其内容，同时处理可能出现的错误。

回到顶部