用js实现qq相册

QQ相册是一个在线图片存储和管理服务，允许用户上传、查看、编辑和分享照片。以下是用JavaScript实现一个简化版QQ相册的基本概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

前端开发：使用HTML、CSS和JavaScript构建用户界面。
后端开发：处理数据存储、用户认证和业务逻辑。
数据库：存储用户信息和图片元数据。
文件存储：存储实际的图片文件。

优势

便捷性：用户可以随时随地上传和查看照片。
分享功能：轻松分享照片给朋友或家人。
组织管理：通过标签、相册等方式组织照片。

类型

个人相册：仅供用户自己访问。
共享相册：可以邀请其他人共同管理和查看。

应用场景

家庭聚会：上传活动照片并分享给所有参与者。
旅行记录：记录旅行中的美好瞬间。
工作项目：团队成员共享项目相关的图片资料。

实现步骤

前端部分

使用HTML和CSS构建页面布局，JavaScript处理用户交互。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ相册</title>
    <style>
        /* 简单样式 */
        .album {
            display: flex;
            flex-wrap: wrap;
        }
        .photo {
            width: 200px;
            height: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>我的相册</h1>
    <input type="file" id="fileInput" multiple>
    <button onclick="uploadPhotos()">上传</button>
    <div id="album" class="album"></div>

    <script>
        async function uploadPhotos() {
            const files = document.getElementById('fileInput').files;
            for (let file of files) {
                const formData = new FormData();
                formData.append('photo', file);
                await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });
            }
            loadAlbum();
        }

        async function loadAlbum() {
            const response = await fetch('/photos');
            const photos = await response.json();
            const albumDiv = document.getElementById('album');
            albumDiv.innerHTML = '';
            for (let photo of photos) {
                const img = document.createElement('img');
                img.src = `/images/${photo.filename}`;
                img.className = 'photo';
                albumDiv.appendChild(img);
            }
        }
    </script>
</body>
</html>

后端部分

使用Node.js和Express处理文件上传和数据存储。

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('photo'), (req, res) => {
    const file = req.file;
    const newPath = path.join(__dirname, 'public', 'images', file.originalname);
    fs.renameSync(file.path, newPath);
    res.send('File uploaded');
});

app.get('/photos', (req, res) => {
    fs.readdir('public/images', (err, files) => {
        if (err) throw err;
        res.json(files);
    });
});

app.use(express.static('public'));

app.listen(3000, () => console.log('Server running on port 3000'));