网站首页 > 技术文章 正文
在一个前后端分离的项目中,如果你希望前端移动端上传图片后,PC端能实时获取这张图片,通常有几种实现方式:
一、使用轮询(简单但不是实时)
PC端每隔几秒请求一次服务器,看是否有新图片。
// PC端示例(React 中用 useEffect 实现轮询)
useEffect(() => {
const interval = setInterval(() => {
fetch('/api/get-latest-image')
.then(res => res.json())
.then(data => {
// 更新图片
setImage(data.imageUrl);
});
}, 3000); // 每3秒轮询一次
return () => clearInterval(interval);
}, []);
优点:实现简单
缺点:不是完全实时,有延迟 + 服务器压力较大
二、使用 WebSocket(推荐做法,实时性好)
PC端连接 WebSocket,移动端上传成功后通过后端广播通知 PC 端。
1. 移动端上传图片
// 上传成功后通知后端(可以通过 HTTP 或 WebSocket)
fetch('/api/upload-image', {
method: 'POST',
body: formData
});
2. 后端接收上传并广播
// 假设使用 Node.js + ws 库
wss.on('connection', function connection(ws) {
clients.push(ws); // 保存连接
});
app.post('/api/upload-image', (req, res) => {
// ...处理图片上传逻辑
const imageUrl = 'https://your-server.com/uploads/image.jpg';
// 通知所有 PC 客户端
clients.forEach(ws => {
ws.send(JSON.stringify({ type: 'newImage', url: imageUrl }));
});
res.json({ success: true });
});
3. PC端监听 WebSocket 消息
// 建立 WebSocket 连接
useEffect(() => {
const ws = new WebSocket('ws://your-server.com');
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'newImage') {
setImage(data.url);
}
};
return () => ws.close();
}, []);
优点:实时性好,用户体验佳
缺点:需要后端支持 WebSocket
三、使用服务端事件 SSE(Server-Sent Events)
比 WebSocket 简单,但只支持从服务器向客户端推送消息(单向)。适用于多个 PC 端订阅上传通知的场景。
总结推荐方案
方式 | 实时性 | 实现难度 | 建议场景 |
轮询 | 一般 | 简单 | 小项目 / 无后端改动场景 |
WebSocket | 高 | 中 | 需要高实时性、多人协同场景 |
SSE | 高 | 中 | 服务端单向推送场景 |
需要我给你补充一份完整的前后端代码示例(例如用 Node.js + React)吗?
#前端上传图片
猜你喜欢
- 2025-06-12 比较常见类型漏洞讲解(二):文件上传
- 2025-06-12 文件上传漏洞全面渗透姿势总结(文件上传漏洞的防御主要从以下几个方面考虑)
- 2025-06-12 Selenium上传文件有多少种方式?不信你有我全
- 2025-06-12 Spring Boot超大文件上传的正确方式
- 2025-06-12 文件太大上传不了?看这里,秒传(文件太大传不过去)
- 2025-06-12 fastapi+vue3文件上传(vue formdata上传文件)
- 2025-06-12 前端开发-文件上传,如何使用XMLHttpRequest将文件发送到后台?
- 2024-10-03 .NET Core WebAPI 基础文件上传 winform调用webapi上传文件
- 2024-10-03 SpringBoot中实现文件上传下载的三种解决方案(推荐)
- 2024-10-03 SPRING BOOT实现文件上传和下载 spring boot 上传文件 路径
你 发表评论:
欢迎- 513℃几个Oracle空值处理函数 oracle处理null值的函数
- 512℃Oracle分析函数之Lag和Lead()使用
- 504℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 499℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 490℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 483℃【数据统计分析】详解Oracle分组函数之CUBE
- 464℃Oracle有哪些常见的函数? oracle中常用的函数
- 463℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (61)
- 前端数组 (73)
- 前端排序 (47)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)