uni-app 在uni.chooseImage的success回调里面无法更新响应式数据也无法使用setTimeout
uni-app 在uni.chooseImage的success回调里面无法更新响应式数据也无法使用setTimeout
项目信息 | 详细信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Mac |
PC开发环境操作系统版本号 | MacOS Sonoma 14.5 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 4.25 |
手机系统 | iOS |
手机系统版本号 | iOS 17 |
手机厂商 | 苹果 |
手机机型 | IPhone15 |
页面类型 | nvue |
vue版本 | vue3 |
打包方式 | 离线 |
项目创建方式 | HBuilderX |
操作步骤:
见问题描述
预期结果:
见问题描述
实际结果:
见问题描述
bug描述:
uni-app x项目,开发ISO App.
avatar是响应式变量,即:ref变量,用于给<image>
显示图片,我的目的是用uni.chooseImage选择图片后显示在<image>
里,后续再上传,不是选择好图片就直接上传。
模板:
<template>
<view class="avatar-box">
<text style="margin-top: 8px;">头像</text>
<image class="avatar-img" :src="avatar" mode="aspectFit" ></image>
</view>
</template>
JavaScript:
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
crop: {
width: 200,
height: 200
},
success: (res) => {
console.log("Array.isArray(res.tempFilePaths)=" + Array.isArray(res.tempFilePaths));
let filepath = res.tempFilePaths[0];
//avatar.value = filepath; //如果uni.chooseImage没crop参数是可以用这行的,avatar值能被更改,图片也会显示出来,但是我需要crop参数,用这行不但无效而且还会导致后面用uni.showModal()里面的回调也失败。
//因为无法直接更改avatar的值,所以想用setTimeout 延时更改avatar值,但结果是无法执行setTimeout里面的function,也就无法更改avatar的值
setTimeout(() => {
//这里的任何代码都无法被执行
console.log("[setTimeout]");
avatar.value = filepath;
}, 200);
//因为无法使用setTimeout()所以用uni.showModal的回调测试一下,结果avatar值居然可以被更改,所以图片也就显示出来了
uni.showModal({
title: "title",
content: "content",
showCancel: false,
success: (res) => {
avatar.value = filepath;
}
});
}
});
总结一下问题: 使用uni.chooseImage选择相册里面的图片时,如果要使用crop参数,就无法在success回调中更改响应式变量avatar的值,也就无法显示图片,请问这是怎么回事?用uni.showModal()的回调来显示图片不是我想要的,我想要的是用户选择照片后就给显示出来,后续再进行上传,至于上传已经测试通过了,crop参数是有效果的,现在问题是图片选择后没法显示出来。
因为这问题在【咨询问题】里面发布了,但没人回答,无奈只好在这里也发布一下,如果你们不认为是BUG也请回答一下,万分感谢!
更多关于uni-app 在uni.chooseImage的success回调里面无法更新响应式数据也无法使用setTimeout的实战教程也可以访问 https://www.itying.com/category-93-b0.html