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

article/2025/7/22 7:20:42

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

实现方法:

前端请求(需要向后端传两个参数,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(这样在获取的时候对图片精度要求不高的情况下是可以使用的)

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


http://www.hkcw.cn/article/jUtUtgfwwp.shtml

相关文章

电磁器件的“折纸革命“:牛津《Sci. Reports》发布剪纸超材料

01 前沿速递&#xff1a;顶尖团队破解行业难题 近日&#xff0c;牛津大学工程科学系杨云芳、Andrea Vallecchi、Ekaterina Shamonina、Christopher Stevens及游忠教授团队在《Scientific Reports》发表突破性研究&#xff0c;提出一类基于剪纸&#xff08;Kirigami&#xff0…

【Java学习笔记】接口

接口 应用场景引出 一、接口的介绍 1. 接口的基本结构 interface 接口名{属性抽象方法 }引出关键字&#xff1a;implements 2. 子类实现接口 class a implements 接口名{}3. 接口中的属性说明&#xff1a;属性默认是public static final修饰的 &#xff08;1&#xff09;f…

02 APP 自动化-Appium 运行原理详解

环境搭建见 01 APP 自动化-环境搭建 文章目录 一、Appium及Appium自动化测试原理二、Appium 自动化配置项三、常见 ADB 命令四、第一个 app 自动化脚本 一、Appium及Appium自动化测试原理 Appium 跨平台、开源的 app 自动化测试框架&#xff0c;用来测试 app 应用程序&#x…

(1)pytest简介和环境准备

1. pytest简介 pytest是python的一种单元测试框架&#xff0c;与python自带的unittest测试框架类似&#xff0c;但是比unittest框架使用起来更简洁&#xff0c;效率更高。根据pytest的官方网站介绍&#xff0c;它具有如下特点&#xff1a; 非常容易上手&#xff0c;入门简单&a…

同元软控、核动力研究院与华北电力大学产学研联合实训室正式揭牌

2025年5月27日&#xff0c;华北电力大学、苏州同元软控信息技术有限公司&#xff08;以下简称“同元软控”&#xff09;、中国核动力研究设计院&#xff08;以下简称“核动力研究院”&#xff09;联合实训室揭牌授权仪式暨座谈交流会在华北电力大学召开。华北电力大学教务处处长…

PyTorch中nn.Module详解

直接print(dir(nn.Module))&#xff0c;得到如下内容&#xff1a; 一、模型结构与参数 parameters() 用途&#xff1a;返回模块的所有可训练参数&#xff08;如权重、偏置&#xff09;。示例&#xff1a;for param in model.parameters():print(param.shape)named_parameters…

若依项目天气模块

在若依项目里添加了一个天气模块&#xff0c;记录一下过程。 一、功能结构与组件布局 天气模块以卡片形式&#xff08;el-card&#xff09;展示&#xff0c;包含以下核心功能&#xff1a; 实时天气&#xff1a;显示当前城市、温度、天气状况&#xff08;如晴、多云&#xff…

APM32芯得 EP.06 | APM32F407移植uC/OS-III实时操作系统经验分享

《APM32芯得》系列内容为用户使用APM32系列产品的经验总结&#xff0c;均转载自21ic论坛极海半导体专区&#xff0c;全文未作任何修改&#xff0c;未经原文作者授权禁止转载。 最近我开始学习 uC/OS-III 实时操作系统&#xff0c;并着手将其移植到APM32F407 开发板上。在这个过…

图解gpt之注意力机制原理与应用

大家有没有注意到&#xff0c;当序列变长时&#xff0c;比如翻译一篇长文章&#xff0c;或者处理一个长句子&#xff0c;RNN这种编码器就有点力不从心了。它把整个序列信息压缩到一个固定大小的向量里&#xff0c;信息丢失严重&#xff0c;而且很难记住前面的细节&#xff0c;特…

更新密码--二阶注入攻击的原理

1.原理知识&#xff1a; 二阶SQL注入攻击&#xff08;Second-Order SQL Injection&#xff09;原理详解 一、基本概念 二阶注入是一种"存储型"SQL注入&#xff0c;攻击流程分为两个阶段&#xff1a; ​​首次输入​​&#xff1a;攻击者将恶意SQL片段存入数据库​…

RFID技术助力托盘运输线革新

RFID技术助力托盘运输线革新 湖北某工厂托盘运输线使用上存在的问题&#xff1a; 1、托盘在运输线上受信息录入时间等问题影响&#xff0c;导致效率低下&#xff1b; 2、原先托盘上粘贴的条码容易污损&#xff0c;并且时常需要更新更换&#xff0c;导致信息录入、出入库等步…

EasyRTC嵌入式音视频通信SDK助力1v1实时音视频通话全场景应用

一、方案概述​ 在数字化通信需求日益增长的今天&#xff0c;EasyRTC作为一款全平台互通的实时视频通话方案&#xff0c;实现了设备与平台间的跨端连接。它支持微信小程序、APP、PC客户端等多端协同&#xff0c;开发者通过该方案可快速搭建1v1实时音视频通信系统&#xff0c;适…

java.io.IOException: ZIP entry size is too large or invalid

java.io.IOException: ZIP entry size is too large or invalid 解决方案&#xff1a;pom.xml添加<nonFilteredFileExtension>xlsx</nonFilteredFileExtension>

vue3 项目配置多语言支持,如何从服务端拿多语言配置

在 Vue3 项目中实现多语言支持并从服务端获取配置&#xff0c;可以使用 Vue I18n 库。在初始化阶段可以发送请求获取多语言配置或者通过本地文件加载json文件的方式&#xff0c;都可以实现。我这里是tauri项目&#xff0c;所以使用的是invoke从tauri端拿到配置文件&#xff0c;…

龙舟竞渡与芯片制造的共通逻辑:华芯邦的文化破局之道

端午节承载着中华民族数千年的精神密码&#xff0c;龙舟最初是古人沟通天地、祈求风调雨顺的仪式载体。战国时期&#xff0c;屈原投江的悲壮故事为端午注入了家国情怀&#xff0c;龙舟竞渡从此兼具纪念英雄与祈福避疫的双重意义。这种文化内核&#xff0c;与深圳市华芯邦“以科…

OS9.【Linux】基本权限(下)

目录 1.默认权限 掩码 修改权限掩码 目录的权限说明 r权限 w权限 x权限 结论 家目录权限 2.共享目录 粘滞位t 承接OS8.【Linux】基本权限(上)文章 1.默认权限 创建用户时拥有者所属组都是该用户,而且对其他人没有任何权限 掩码 新建文件new.txt1和目录folder后…

【容器docker】启动容器kibana报错:“message“:“Error: Cannot find module ‘./logs‘

说明&#xff1a; 1、服务器数据盘挂了&#xff0c;然后将以前的数据用rsync拷贝过去&#xff0c;启动容器kibana服务&#xff0c;报错信息如下图所示&#xff1a; 2、可能是拷贝docker文件夹&#xff0c;有些文件没有拷贝过去&#xff0c;导致无论是给文件夹授权用户kibana或者…

【25-cv-05917】HSP律所代理Le Petit Prince 小王子商标维权案

Le Petit Prince 小王子 案件号&#xff1a;25-cv-05917 立案时间&#xff1a;2025年5月28日 原告&#xff1a;SOCIETE POUR LOEUVRE ET LA MEMOIRE DANTOINE DE SAINT EXUPERY - SUCCESSION DE SAINT EXUPERY-DAGAY 代理律所&#xff1a;HSP 原告介绍 《小王子》&#x…

信创国产化

一、硬件国产化 1. 飞腾E2000Q 二、操作系统国产化 1. 麒麟系统 1.1 麒麟嵌入式支持飞腾E2000Q 1.1.1 启动安装盘制作 1. 下载rufus工具,安装,下载麒麟系统ISO镜像文件。 2. 使用rufus制作启动盘,U盘插入(注先备份数据,会格式化盘符),配置参数如图。 3. 点击…

一、Sqoop历史发展及原理

作者&#xff1a;IvanCodes 日期&#xff1a;2025年5月30日 专栏&#xff1a;Sqoop教程 在大数据时代&#xff0c;数据往往分散存储在各种不同类型的系统中。其中&#xff0c;传统的关系型数据库 (RDBMS) 如 MySQL, Oracle, PostgreSQL 等&#xff0c;仍然承载着大量的关键业务…