uni-app plus.gallery.pick 没有清理图片缓存

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

uni-app plus.gallery.pick 没有清理图片缓存

开发环境 版本号 项目创建方式
HBuilderX 4.29 -

示例代码：

plus.gallery.pick(function (file) {  
}, function (e) {  
}, {  
    filter: "image",  
    crop: {  
        quality: 75,  
        resize: true  
    }  
});

操作步骤：

plus.gallery.pick(function (file) {  

}, function (e) {  
}, {  
    filter: "image",  
    crop: {  
        quality: 75,  
        resize: true  
    }  
});

预期结果：


## 实际结果：

bug描述：

使用 plus.gallery.pick 选择手机图片后，图片放到了软件目录中再之后一直没被清除掉，会导致App大小一直变大。


Harmonyos Next教程
3 回复

项目是html5+APP


使用io API进行清理 https://www.html5plus.org/doc/zh_cn/io.html

在处理 uni-app 的 plus.gallery.pick 方法时，确实需要注意图片缓存的问题。如果未清理图片缓存，可能会导致应用占用的存储空间不断增加，进而影响用户体验。虽然 uni-app 官方文档中没有直接提供清理缓存的API，但我们可以通过一些编程技巧来手动管理缓存。

以下是一个示例代码，展示了如何在选择图片后，将图片保存到指定位置，并在不再需要时删除这些图片，从而间接实现清理缓存的目的。

示例代码

// 选择图片
plus.gallery.pick({
    success: function (e) {
        var files = e.files; // 获取选中的图片文件数组
        files.forEach(function (file) {
            // 将图片文件保存到应用私有目录
            var filePath = '_www/' + file.name; // 自定义保存路径
            plus.io.resolveLocalFileSystemURL('_www/', function (entry) {
                entry.getFile(file.name, {create: true, exclusive: false}, function (fileEntry) {
                    fileEntry.createWriter(function (writer) {
                        var reader = new FileReader();
                        reader.onloadend = function (e) {
                            writer.write(e.target.result);
                        };
                        reader.readAsArrayBuffer(file);
                    }, function (e) {
                        console.error('创建写入器失败: ' + e.message);
                    });
                }, function (e) {
                    console.error('获取文件失败: ' + e.message);
                });
            }, function (e) {
                console.error('解析本地文件系统URL失败: ' + e.message);
            });

            // 存储图片路径，以便后续删除
            localStorage.setItem('imagePaths', JSON.stringify([...(JSON.parse(localStorage.getItem('imagePaths')) || []), filePath]));
        });
    },
    fail: function (e) {
        console.error('选择图片失败: ' + e.message);
    }
});

// 删除缓存图片（例如，在应用退出时）
function clearImageCache() {
    var imagePaths = JSON.parse(localStorage.getItem('imagePaths')) || [];
    imagePaths.forEach(function (path) {
        plus.io.resolveLocalFileSystemURL(path, function (entry) {
            entry.remove(function () {
                console.log('删除图片成功: ' + path);
            }, function (e) {
                console.error('删除图片失败: ' + e.message);
            });
        }, function (e) {
            console.error('解析图片路径失败: ' + e.message);
        });
    });
    localStorage.removeItem('imagePaths'); // 清空存储的图片路径
}

注意事项

  1. 权限管理：确保应用已获取存储权限。
  2. 路径管理：根据实际需求调整图片保存路径。
  3. 异步处理：文件操作是异步的，需要正确处理回调。
  4. 错误处理：添加必要的错误处理逻辑，以提高应用的健壮性。

通过上述代码，我们可以实现对选中图片的缓存管理，从而避免应用占用过多存储空间。

回到顶部