Hochladen von Bildern in Next.js (Datei-Uploads, Filestack)

1. Einführung

Das Hochladen von Bildern in Next.js ist eine häufige Aufgabe bei der Entwicklung von Webanwendungen. In diesem Tutorial werden wir zwei verschiedene Ansätze untersuchen:

• Dateien direkt hochladen in Ihr Backend (mit Next.js).
• Mit Filestack, einem Dienst, der die Dateiverwaltung in der Cloud vereinfacht.

Voraussetzungen:

• Die neueste Version von Next.js muss installiert sein.
• Grundkenntnisse von React und Node.js.
• Für den Filestack-Bereich benötigen Sie ein Filestack-Konto.

2. Bilder direkt hochladen (Datei-Uploads)

Sehen wir uns zunächst an, wie Sie Datei-Uploads direkt in Next.js verwalten können, ohne externe Dienste zu nutzen.

Schritt 1: Erstellen Sie das Upload-Formular in Next.js

Erstellen Sie in der gewünschten Komponente ein Formular, um ein Bild auszuwählen und hochzuladen. Hier verwenden wir useState, um die Datei zu speichern und abzurufen, um sie an das Backend zu senden.

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>
  );
}

Schritt 2: Erstellen Sie die API zur Verarbeitung des Uploads

Erstellen Sie nun einen Endpunkt in Next.js, um das Bild im Backend zu verarbeiten. Wir werden die API-Routen von Next.js verwenden, um serverseitige Vorgänge abzuwickeln.

Erstellen Sie eine Datei in 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' });
  }
}

Schritt 3: Erstellen Sie den Upload-Ordner

Stellen Sie sicher, dass Sie im Stammverzeichnis Ihres Projekts einen Ordner namens „Uploads“ haben. Sie können es manuell erstellen:

mkdir uploads

Damit können Sie nun ein Bild auswählen und direkt auf Ihren Server hochladen.

3. Hochladen von Bildern mit Filestack

Wenn Sie nun lieber einen externen Dienst wie Filestack nutzen möchten, der Dateihosting, CDN und effiziente Bildverarbeitung bietet, können Sie dies wie folgt tun.

Schritt 1: Filestack installieren

Zuerst müssen wir das Filestack-Paket in Ihrem Next.js-Projekt installieren.

npm install filestack-js

Schritt 2: Filestack im Frontend einrichten

Als nächstes richten wir das Filestack-Widget in einer Komponente ein, damit Benutzer Bilder auswählen und hochladen können. Dies ist unkompliziert, da Filestack ein gebrauchsfertiges Widget bereitstellt.

Hier ist eine Beispielimplementierung:

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>
  );
}

Schritt 3: Holen Sie sich Ihren Filestack-API-Schlüssel

Damit Filestack funktioniert, müssen Sie ein Konto bei Filestack erstellen und Ihren API-Schlüssel generieren. Ersetzen Sie YOUR_API_KEY im obigen Code durch den Ihnen bereitgestellten.

Schritt 4: Zeigen Sie das hochgeladene Bild an

Sobald der Benutzer ein Bild hochlädt, können Sie es mithilfe der von Filestack generierten URL anzeigen:

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

4. Fazit

Und das ist es! Sie haben jetzt zwei Ansätze, um Bild-Uploads in einer Next.js-Anwendung zu verarbeiten:

• Direkter Upload in Ihr Backend.
• Hochladen mit Filestack, was Ihnen eine fortschrittlichere und skalierbarere Lösung bietet, wenn Sie den Dateispeicher nicht selbst verwalten möchten.

Das obige ist der detaillierte Inhalt vonHochladen von Bildern in Next.js (Datei-Uploads, Filestack). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!