ReactJs xây dụng chức năng upload ảnh đơn giản

Dưới đây là một module ReactJS đơn giản để upload ảnh lên server. Phía server sẽ lưu ảnh vào thư mục images.

Module này gồm hai phần:

• Front-end (ReactJS): Tạo giao diện upload ảnh, cho phép người dùng chọn file và gửi lên server qua API.
• Back-end (Node.js): Xử lý yêu cầu từ client, lưu file ảnh vào thư mục images trên server với tên file độc nhất.

Khi ảnh được upload thành công, server trả về thông báo xác nhận kèm đường dẫn file.

1. Front-end (ReactJS)

Tạo một component ImageUploader để người dùng chọn và upload ảnh.

import React, { useState } from "react";
import axios from "axios";

const ImageUploader = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploadStatus, setUploadStatus] = useState("");

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = async () => {
    if (!selectedFile) {
      setUploadStatus("Please select a file first.");
      return;
    }

    const formData = new FormData();
    formData.append("image", selectedFile);

    try {
      const response = await axios.post("http://localhost:5000/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      setUploadStatus(response.data.message);
    } catch (error) {
      setUploadStatus("Upload failed. Please try again.");
    }
  };

  return (
    <div>
      <h1>Image Uploader</h1>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
      <p>{uploadStatus}</p>
    </div>
  );
};

export default ImageUploader;

---

2. Back-end (Node.js với Express)

Dưới đây là một server Node.js đơn giản để xử lý việc upload ảnh. Server sẽ lưu ảnh vào thư mục images.

Cài đặt các thư viện cần thiết:

npm install express multer body-parser

Code server:

Tạo file server.js:

const express = require("express");
const multer = require("multer");
const path = require("path");

const app = express();

// Cấu hình multer để lưu file vào thư mục "images"
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "images");
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname)); // Đặt tên file
  },
});

const upload = multer({ storage });

// Middleware để parse JSON
app.use(express.json());
app.use(express.static("images")); // Để truy cập ảnh qua URL nếu cần

// Endpoint upload ảnh
app.post("/upload", upload.single("image"), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ message: "No file uploaded" });
  }
  res.json({ message: "File uploaded successfully", filePath: `/images/${req.file.filename}` });
});

// Khởi động server
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

---

3. Tạo thư mục images

Tạo một thư mục images trong thư mục gốc của server để lưu trữ các file được upload.

mkdir images

---

4. Chạy server và ứng dụng React

• Chạy server: node server.js
• Chạy ứng dụng React: npm start

---

5. Kết quả:

1. Mở ứng dụng React.
2. Chọn file ảnh và nhấn nút “Upload”.
3. Ảnh được gửi đến server qua API /upload và lưu vào thư mục images.

Bạn có thể mở ảnh đã upload bằng URL:

http://localhost:5000/images/<tên_file>

Kết luận

Module này cung cấp giải pháp cơ bản và dễ triển khai để upload ảnh từ ứng dụng ReactJS lên server Node.js. Nó phù hợp với các dự án cần lưu trữ file cục bộ. Bạn có thể mở rộng thêm các tính năng như kiểm tra kích thước file, loại file, hoặc lưu trữ ảnh lên các dịch vụ cloud (AWS S3, Google Cloud Storage) nếu cần.