uni-app renderjs通过input file获取文件无报错闪退

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

uni-app renderjs通过input file获取文件无报错闪退

操作步骤：

const fileInput = document.createElement('input');  
fileInput.type = 'file';  
fileInput.click();

预期结果：

不闪退即可

实际结果：

突然闪退

bug描述：

在renderjs中去通过 input获取文件时，如果是从相机获取的无任何问题，如果是从文件管理器获取的文件则会正常执行后面的代码，但是会在1s后直接闪退，无任何报错信息。


| 信息类别         | 信息内容          |
|------------------|-------------------|
| 产品分类         | uniapp/App        |
| PC开发环境       | Windows           |
| PC开发环境版本   | win10             |
| HBuilderX类型    | 正式              |
| HBuilderX版本    | 4.29              |
| 手机系统         | Android           |
| 手机系统版本     | Android 14        |
| 手机厂商         | one Plus          |
| 手机机型         | one Plus Ace2 Pro |
| 页面类型         | vue               |
| vue版本          | vue3              |
| 打包方式         | 云端              |
| 项目创建方式     | HBuilderX         |

Harmonyos Next教程
3 回复

提供复现工程，或者复现完整代码吧。崩溃日志有没有，有没有绕过方式，这部分业务代码是否可以不用 renderjs 来处理。目前的 chooseMeida 是否满足要求


重新打了一个测试包，问题就好了

在使用uni-app进行开发时，如果遇到通过<input type="file">获取文件时应用无报错但闪退的问题，可能是由于在处理文件上传或读取文件内容时出现了某些未捕获的异常。renderjs环境在uni-app中提供了一套类似于小程序的渲染层脚本执行能力，但在处理文件操作时仍需要谨慎。

以下是一个使用renderjs结合<input type="file">进行文件选择的示例代码，并展示如何安全地处理文件读取，以避免应用闪退：

<template>
  <view>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <image v-if="previewImage" :src="previewImage" mode="widthFix" style="width: 100%;" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      previewImage: ''
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.detail.file.tempFilePath;
      this.readFileContent(file);
    },
    readFileContent(filePath) {
      // 使用uni.getFileSystemManager()读取文件内容
      const fs = uni.getFileSystemManager();
      fs.readFile({
        filePath,
        encoding: 'base64',
        success: (res) => {
          this.previewImage = `data:image/png;base64,${res.data}`; // 假设是png图片
        },
        fail: (err) => {
          console.error('读取文件失败:', err);
          // 可以在此处添加更多的错误处理逻辑，比如显示错误提示等
        }
      });
    }
  }
};
</script>

<!-- 注意：renderjs中通常不使用Vue的methods，但这里为了说明问题，我们仍使用Vue语法。
     在纯renderjs环境中，你会需要使用JS原生事件监听和文件处理API。
     下面是一个简化的renderjs示例，展示如何在renderjs中处理文件选择：
-->
<script module="renderScript" lang="renderjs">
export default {
  mounted() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.addEventListener('change', (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const base64String = e.target.result;
          // 在这里处理base64String，比如更新页面上的图片预览
        };
        reader.readAsDataURL(file);
      }
    });
    document.body.appendChild(input);
    input.click(); // 自动触发文件选择
  }
};
</script>

上述代码展示了如何在Vue组件中以及renderjs模块中处理文件选择。在renderjs环境中，我们使用了原生的FileReader API来读取文件内容，并避免了直接操作DOM导致的潜在问题。在实际应用中，确保所有可能的异常都被捕获和处理，可以有效防止应用闪退。

回到顶部