react实现头像上传

实现头像上传功能

使用React实现头像上传功能需要结合文件输入、图片预览和上传逻辑。以下是一个完整的实现方案：

创建上传组件

创建一个React组件来处理头像上传功能，包含文件选择和预览功能：

import React, { useState, useRef } from 'react';

const AvatarUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [previewUrl, setPreviewUrl] = useState('');
  const fileInputRef = useRef(null);

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file && file.type.match('image.*')) {
      setSelectedFile(file);
      const reader = new FileReader();
      reader.onload = () => {
        setPreviewUrl(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleUpload = async () => {
    if (!selectedFile) return;

    const formData = new FormData();
    formData.append('avatar', selectedFile);

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      const data = await response.json();
      console.log('Upload success:', data);
    } catch (error) {
      console.error('Upload error:', error);
    }
  };

  return (
    <div className="avatar-upload">
      <input
        type="file"
        ref={fileInputRef}
        onChange={handleFileChange}
        accept="image/*"
        style={{ display: 'none' }}
      />
      <div className="preview-container">
        {previewUrl ? (
          <img src={previewUrl} alt="Preview" className="avatar-preview" />
        ) : (
          <div className="placeholder">No image selected</div>
        )}
      </div>
      <button onClick={() => fileInputRef.current.click()}>
        Select Image
      </button>
      {selectedFile && (
        <button onClick={handleUpload}>Upload Avatar</button>
      )}
    </div>
  );
};

export default AvatarUpload;

服务器端处理

创建一个简单的Express服务器来处理上传请求：

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

// 配置multer存储
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname));
  }
});

const upload = multer({ storage });

app.post('/api/upload', upload.single('avatar'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: 'No file uploaded' });
  }
  res.json({
    success: true,
    filePath: `/uploads/${req.file.filename}`
  });
});

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

样式优化

添加基本样式提升用户体验：

.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.preview-container {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder {
  color: #999;
  text-align: center;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

高级功能扩展

添加裁剪功能可以使用react-image-crop库：

import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

const [crop, setCrop] = useState(null);
const [croppedImage, setCroppedImage] = useState(null);

const onImageLoad = (image) => {
  setCrop({
    unit: '%',
    width: 100,
    aspect: 1,
  });
};

const makeClientCrop = async (crop) => {
  if (previewUrl && crop.width && crop.height) {
    const croppedImageUrl = await getCroppedImg(previewUrl, crop);
    setCroppedImage(croppedImageUrl);
  }
};

return (
  <div className="avatar-upload">
    {previewUrl && (
      <ReactCrop
        src={previewUrl}
        crop={crop}
        onChange={setCrop}
        onComplete={makeClientCrop}
        onImageLoaded={onImageLoad}
      />
    )}
    {/* 其他代码 */}
  </div>
);

表单集成

将上传组件集成到表单中：

const UserProfileForm = () => {
  const [avatarUrl, setAvatarUrl] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 提交表单数据，包括avatarUrl
  };

  const handleUploadSuccess = (filePath) => {
    setAvatarUrl(filePath);
  };

  return (
    <form onSubmit={handleSubmit}>
      <AvatarUpload onUploadSuccess={handleUploadSuccess} />
      {/* 其他表单字段 */}
      <button type="submit">Save Profile</button>
    </form>
  );
};

以上实现提供了完整的头像上传解决方案，包括前端界面、后端处理和可选的高级功能扩展。根据实际需求可以调整文件大小限制、支持的图片格式等参数。