前端移动端上传图片pc端如何实时获取

360影视 日韩动漫 2025-05-27 02:31 4

摘要:// PC端示例(React 中用 useEffect 实现轮询)useEffect( => {const interval = setInterval( => {fetch('/api/get-latest-image').then(res => res.j

在一个前后端分离的项目中,如果你希望前端移动端上传图片后,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);}, );

优点:实现简单
缺点:不是完全实时,有延迟 + 服务器压力较大

PC端连接 WebSocket,移动端上传成功后通过后端广播通知 PC 端。

// 假设使用 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 });});// 建立 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

比 WebSocket 简单,但只支持从服务器向客户端推送消息(单向)。适用于多个 PC 端订阅上传通知的场景。

需要我给你补充一份完整的前后端代码示例(例如用 Node.js + React)吗?

#前端上传图片

来源:娱乐花猫

相关推荐