Memuat naik Imej dalam Next.js (Muat Naik Fail, Filestack)

1. Pengenalan

Memuat naik imej dalam Next.js ialah tugas biasa apabila membangunkan aplikasi web. Dalam tutorial ini, kami akan meneroka dua pendekatan berbeza:

• Memuat naik fail terus ke hujung belakang anda (dengan Next.js).
• Menggunakan Filestack, perkhidmatan yang memudahkan pengurusan fail dalam awan.

Prasyarat:

• Pasang versi terkini Next.js.
• Pengetahuan asas React dan Node.js.
• Untuk bahagian Filestack, anda memerlukan akaun Filestack.

2. Memuat naik Imej Secara Terus (Muat Naik Fail)

Mula-mula, mari lihat cara anda boleh mengendalikan muat naik fail terus dalam Next.js tanpa menggunakan perkhidmatan luaran.

Langkah 1: Cipta borang muat naik dalam Next.js

Buat borang dalam komponen yang anda inginkan untuk memilih dan memuat naik imej. Di sini, kami menggunakan useState untuk menyimpan fail dan mengambil untuk menghantarnya ke bahagian belakang.

import { useState } from 'react';

export default function UploadForm() {
  const [selectedFile, setSelectedFile] = useState(null);

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

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', selectedFile);

    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      console.log('File uploaded successfully');
    } else {
      console.error('Error uploading file');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">Upload</button>
    </form>
  );
}

Langkah 2: Cipta API untuk mengendalikan muat naik

Sekarang, buat titik akhir dalam Next.js untuk memproses imej di bahagian belakang. Kami akan menggunakan laluan API Next.js untuk mengendalikan operasi bahagian pelayan.

Buat fail dalam pages/api/upload.js:

import fs from 'fs';
import path from 'path';

export const config = {
  api: {
    bodyParser: false, // Disable bodyParser to handle large files
  },
};

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const chunks = [];

    req.on('data', (chunk) => {
      chunks.push(chunk);
    });

    req.on('end', () => {
      const buffer = Buffer.concat(chunks);
      const filePath = path.resolve('.', 'uploads', 'image.png'); // Saves to the `uploads` folder

      fs.writeFileSync(filePath, buffer);
      res.status(200).json({ message: 'File uploaded successfully' });
    });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

Langkah 3: Buat folder muat naik

Pastikan anda mempunyai folder yang dipanggil muat naik dalam akar projek anda. Anda boleh menciptanya secara manual:

mkdir uploads

Dengan ini, anda kini boleh memilih imej dan memuat naiknya terus ke pelayan anda.

3. Memuat naik Imej dengan Filestack

Kini, jika anda lebih suka menggunakan perkhidmatan luaran seperti Filestack, yang menawarkan pengehosan fail, CDN dan pengendalian imej yang cekap, berikut ialah cara anda boleh melakukannya.

Langkah 1: Pasang Filestack

Pertama, kami perlu memasang pakej Filestack dalam projek Next.js anda.

npm install filestack-js

Langkah 2: Sediakan Filestack di bahagian hadapan

Seterusnya, mari sediakan widget Filestack dalam komponen supaya pengguna boleh memilih dan memuat naik imej. Ini adalah mudah, kerana Filestack menyediakan widget sedia untuk digunakan.

Berikut ialah contoh pelaksanaan:

import { useState } from 'react';
import * as filestack from 'filestack-js';

const client = filestack.init('YOUR_API_KEY'); // Replace with your API Key

export default function FilestackUpload() {
  const [imageUrl, setImageUrl] = useState('');

  const handleUpload = async () => {
    const result = await client.picker({
      onUploadDone: (res) => {
        setImageUrl(res.filesUploaded[0].url);
        console.log('File uploaded: ', res.filesUploaded[0].url);
      },
    }).open();
  };

  return (
    <div>
      <button onClick={handleUpload}>Upload Image with Filestack</button>
      {imageUrl && <img src={imageUrl} alt="Uploaded Image" />}
    </div>
  );
}

Langkah 3: Dapatkan Kunci API Filestack anda

Untuk Filestack berfungsi, anda perlu membuat akaun pada Filestack dan menjana Kunci API anda. Gantikan YOUR_API_KEY dalam kod di atas dengan yang diberikan kepada anda.

Langkah 4: Paparkan imej yang dimuat naik

Setelah pengguna memuat naik imej, anda boleh memaparkannya menggunakan URL yang dijana oleh Filestack:

{imageUrl && <img src={imageUrl} alt="Uploaded Image" />}

4. Kesimpulan

Dan itu sahaja! Anda kini mempunyai dua pendekatan untuk mengendalikan muat naik imej dalam aplikasi Next.js:

• Muat naik terus ke hujung belakang anda.
• Muat naik menggunakan Filestack, yang memberikan anda penyelesaian yang lebih maju dan berskala jika anda tidak mahu mengurus sendiri storan fail.

Atas ialah kandungan terperinci Memuat naik Imej dalam Next.js (Muat Naik Fail, Filestack). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!