欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 国际 > 如何优化微信小程序中渲染带有图片的列表(二进制流存储方式的图片存在本地数据库)

如何优化微信小程序中渲染带有图片的列表(二进制流存储方式的图片存在本地数据库)

2025/9/11 3:47:21 来源:https://blog.csdn.net/qq_58294345/article/details/148324905  浏览:    关键词:如何优化微信小程序中渲染带有图片的列表(二进制流存储方式的图片存在本地数据库)

方法一:对列表的获取进行分页处理

实现方法:

前端请求(需要向后端传两个参数,pageIndex是获取第几页是从0开始,pageSize是这一页需要获取多少个数据)

后端接口实现(因为这里是通过参数拼接请求的形式传数据,所以接口使用HttpGet进行获取)

当我们拿到这两个参数后需要使用sql语句去本地数据库进行分页取数据

代码如下:

var sqlStr = $"select * from UserInfo where UserType=1 ORDER BY UserInfoId OFFSET {pageIndex * pageSize} ROWS FETCH NEXT {pageSize} ROWS ONLY;";

这里就将获取的数据进行返回就可以了,在返回后如果想加载下一页的数据。(这里使用了微信小程序上拉触底的事件) 

直接找到上拉触底事件的生命周期,然后在其中先对当前页进行加1,在去请求获取数据的接口(获取的数据需要自己处理到当前的数据列表中,这样才不会丢失已存在的数据)

方法二:在保存数据时就对前端返回的二进制图片数据进行压缩处理(后端处理压缩,前端不太好实现)

在前端获取的数据流就是如上图所示传到后端的时候是使用string类型接收的

首先我们先去实现一个工具类:

 /// <summary>/// 图片压缩工具类/// </summary>public class ImageCompressor{public byte[] CompressImageFromBase64(string base64Data, long quality = 70L){// 1. 去除Base64头(如"data:image/png;base64,")//var cleanBase64 = base64Data.Split(',')[1];byte[] imageBytes = Convert.FromBase64String(base64Data);// 2. 加载图片并压缩using (var msInput = new MemoryStream(imageBytes))using (var image = Image.FromStream(msInput))using (var msOutput = new MemoryStream()){// 设置JPEG压缩质量(如果是PNG,调整格式)var encoderParams = new EncoderParameters(1);encoderParams.Param[0] = new EncoderParameter(Encoder.Quality, quality);// 获取JPEG编码器var jpegEncoder = GetEncoder(ImageFormat.Jpeg);// 保存压缩后的图片image.Save(msOutput, jpegEncoder, encoderParams);return msOutput.ToArray();}}private ImageCodecInfo GetEncoder(ImageFormat format){var codecs = ImageCodecInfo.GetImageDecoders();foreach (var codec in codecs){if (codec.FormatID == format.Guid)return codec;}return null;}}

这个工具类可以将前端传的base64String类型的数据转为二进制数进行存储,并将文件压缩为原先百分之70(这样在获取的时候对图片精度要求不高的情况下是可以使用的)

方法三:对大文件进行分片存储 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词