uni-app chooseMedia:fail Cannot destructure property 'canceled' of 'h' as it is undefined

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

uni-app chooseMedia:fail Cannot destructure property ‘canceled’ of ‘h’ as it is undefined

开发环境 版本号 项目创建方式
Windows Windows 10 专业版 HBuilderX

示例代码：

uni.chooseImage({  
    count: 3,  
    success: (res) => {  
        uni.showToast({ title: "选择成功" });  
        console.log("chooseImage 返回结果：", res);  
    },  
    fail(err) {  
        let errType = err.errMsg.includes("chooseImage:fail cancel") ?  
            "取消选择" :  
            "选择失败";  
        uni.showModal({  
            title: errType,  
            content: err.errMsg,  
            showCancel: false,  
        });  
    },  
    complete() {  
        console.log("完成选择");  
    },  
});

uni.chooseMedia({  
    count: 3,  
    success: (res) => {  
        uni.showToast({ title: "选择成功" });  
        console.log("chooseImage 返回结果：", res);  
    },  
    fail(err) {  
        let errType = err.errMsg.includes("chooseImage:fail cancel") ?  
            "取消选择" :  
            "选择失败";  
        uni.showModal({  
            title: errType,  
            content: err.errMsg,  
            showCancel: false,  
        });  
    },  
    complete() {  
        console.log("完成选择");  
    },  
});

操作步骤：

  • 点击上传按钮，执行uni.chooseImage或uni.chooseMedia

预期结果：

  • 开发者工具能正常调试

实际结果：

  • 报错，图片无法选择

bug描述：

js调用uni.chooseImage，返回错误：chooseImage:fail Cannot destructure property 'canceled' of 'd' as it is undefined.

调用uni.chooseMedia，返回错误：chooseMedia:fail Cannot destructure property 'canceled' of 'h' as it is undefined.


Harmonyos Next教程
4 回复

直接使用原生抖音小程序（不使用uni-app）测试，是否仍然存在此问题


我先创建了一个抖音原生应用，测试了一下正常，然后又运行uniapp项目，竟然都正常了。

我知道原因了，使用uni-file-picker组件，会导致整个页面卡死，然后再使用uni.chooseImage或uni.chooseMedia，就出现上述错误提示，然后再运行抖音原生应用，正常使用，再运行uniapp项目，不使用uni-file-picker组件，就一切正常了。

在uni-app中，遇到chooseMedia:fail Cannot destructure property 'canceled' of 'h' as it is undefined这样的错误通常是因为在处理chooseMedia方法返回的结果时，尝试解构一个未定义的对象。这可能是因为API调用失败，或者返回的数据结构与预期不符。下面是一个处理chooseMedia的示例代码，展示如何安全地解构返回值并处理可能的错误。

首先，确保你的uni-app项目已经正确配置了相关权限（如相机和相册访问权限），并且chooseMedia方法被正确调用。

示例代码

Page({
  data: {
    // 其他数据
  },

  chooseMediaHandler() {
    uni.chooseMedia({
      count: 9, // 最多可以选择的图片张数
      sourceType: ['album', 'camera'], // 可以指定是来源是相册还是相机，默认二者都有
      success: (res) => {
        try {
          // 尝试解构返回的result数组中的每个文件对象
          const { files = [], canceled } = res;
          
          if (canceled) {
            console.log('用户取消了选择');
          } else {
            files.forEach((file) => {
              console.log('选中的文件:', file);
              // 可以在这里处理选中的文件，比如上传
            });
          }
        } catch (error) {
          console.error('处理chooseMedia结果时出错:', error);
        }
      },
      fail: (err) => {
        console.error('chooseMedia调用失败:', err);
        // 可以在这里处理调用失败的逻辑，比如显示错误信息给用户
      }
    });
  },

  // 其他方法
});

说明

  1. 解构赋值：在success回调中，我们尝试从res中解构出files和canceled。使用默认值[]和undefined来确保即使res的结构不完全符合预期，代码也不会抛出错误。

  2. 错误处理：使用try...catch块来捕获解构过程中可能发生的任何错误，并打印错误信息。

  3. 调用失败处理：在fail回调中处理chooseMedia调用失败的情况，例如显示错误信息给用户。

确保你的uni-app版本和依赖库都是最新的，有时候这类问题也可能是由于框架本身的bug导致的。如果问题依旧存在，建议查看uni-app的官方文档或社区，看看是否有其他人遇到并解决了类似的问题。

回到顶部