uniapp项目中选择相册图片不显示怎么解决

1. 问题描述

在开发uniapp项目时，我们可能会遇到选择相册图片不显示的问题。这个问题的出现，可能导致用户无法上传所需的图片，影响项目正常运作。那么，我们该如何解决这个问题呢？

2. 问题分析

在开发uniapp项目时，我们通常会使用uni-app提供的API来实现选择相册图片的功能。其中，以下两个API使用比较频繁：

2.1 uni.chooseImage()

这个API可以弹出手机的系统相册，让用户选择图片，并返回选择的图片的路径，接着我们就可以进行图片的上传等其他操作。

uni.chooseImage({

    count: 1, // 默认为9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
    }
})

2.2 uni.getImageInfo()

这个API可以获取图片的详细信息，包括图片的宽度、高度、路径等。我们通常使用它来获取图片的宽高信息，并进行处理，保证图片正常显示。

uni.getImageInfo({

    src: 'tempFilePaths[0]',
    success: function (res) {        
        console.log(res.width);
        console.log(res.height);
    }
})

3. 解决方法

针对选择相册图片不显示的问题，我们有以下几种解决方法：

3.1 检查文件路径

首先，我们需要检查图片文件的路径是否正确。一般来说，我们可以通过控制台输出路径信息进行检查。如果路径不正确，那么就需要重新设置路径。

uni.chooseImage({

    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: function (res) {
        console.log(res.tempFilePaths[0]); // 检查文件路径
        var tempFilePaths = res.tempFilePaths;
    }
})

3.2 检查权限设置

如果文件路径正确，但是选择相册图片仍然不显示，那么就需要检查权限设置。有些手机在使用系统相册时，需要用户授权才能访问相册，否则将无法读取相册中的图片。在这种情况下，我们可以调用uni.requestAuth方法，对用户进行授权。

uni.getSetting({

    success(res) {
        if (!res.authSetting['scope.album']) {
            uni.authorize({
                scope: 'scope.album',
                success() {
                    uni.chooseImage({
                        ...
                    });
                }
            });
        } else {
            uni.chooseImage({
                ...
            });
        }
    }
})

3.3 检查图片信息

如果文件路径和权限设置都没问题，那么就需要检查图片信息了。我们可以调用uni.getImageInfo方法获取图片的详细信息，以确定图片是否正常显示。

uni.chooseImage({

    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        uni.getImageInfo({
            src: tempFilePaths[0],
            success: function (res) {
                console.log(res.width);
                console.log(res.height);
                ...
            }
        })
    }
})

4. 总结

在开发uniapp项目时，选择相册图片不显示可能会出现。针对这个问题，我们需要从文件路径、权限设置和图片信息等几个方面进行排查。通过以上方案的实施，可以有效地解决选择相册图片不显示的问题，让项目正常运作。