在 Next.js 中上傳圖像（檔案上傳、Filestack）

首頁 > 程式設計 > 在 Next.js 中上傳圖像（檔案上傳、Filestack）

在 Next.js 中上傳圖像（檔案上傳、Filestack）

發佈於2024-11-12

Uploading Images in Next.js (File Uploads, Filestack)

一、簡介

在 Next.js 中上傳映像是開發 Web 應用程式時的常見任務。在本教程中，我們將探索兩種不同的方法：

直接上傳檔案到您的後端（使用 Next.js）。
使用 Filestack，一種簡化雲端中文件管理的服務。

先決條件：

已安裝最新版本的Next.js。
React基礎和Node.js.
Filestack 帳戶。

2.直接上傳圖片（文件上傳）

首先，讓我們看看如何直接在 Next.js 中處理檔案上傳而不使用外部服務。

第 1 步：在 Next.js 中建立上傳表單

在所需元件中建立表單以選擇並上傳圖像。這裡，我們使用useState來儲存檔案並獲取以將其發送到後端。

從 'react' 導入 { useState }; 導出預設函數UploadForm() { const [selectedFile, setSelectedFile] = useState(null); const handleFileChange = (事件) => { setSelectedFile(event.target.files[0]); }; const handleSubmit = 非同步（事件）=> { event.preventDefault(); const formData = new FormData(); formData.append('檔案', selectedFile); const 回應 = 等待 fetch('/api/upload', { 方法：'POST'，正文：表單數據， }); 如果（響應.ok）{ console.log('檔案上傳成功'); } 別的 { console.error('上傳檔案時發生錯誤'); } }; 返回（

形式> ）； }

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 (

); } 第 2 步：建立 API 來處理上傳

現在，在 Next.js 中建立一個端點以在後端處理影像。我們將使用 Next.js 的 API 路由來處理伺服器端操作。

在pages/api/upload.js中建立檔案：

從'fs'導入fs；從“路徑”導入路徑；導出常數配置= { 應用程式介面：{ bodyParser: false, // 停用 bodyParser 處理大文件 }, }; 匯出預設非同步函數處理程序（req，res）{ if (req.method === 'POST') { 常量塊= []； req.on('資料', (區塊) => { chunks.push(塊); }); req.on('結束', () => { const buffer = Buffer.concat(chunks); const filePath = path.resolve('.', '上傳', 'image.png'); // 儲存到 `uploads` 資料夾 fs.writeFileSync(filePath, 緩衝區); res.status(200).json({ message: '檔案上傳成功' }); }); } 別的 { res.status(405).json({ message: '方法不允許' }); } }

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 (

); } 第三步：建立上傳資料夾

確保專案根目錄中有一個名為 uploads 的資料夾。您可以手動建立：

mkdir上傳

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 (

); } 有了這個，您現在可以選擇圖像並將其直接上傳到您的伺服器。

3. 使用Filestack上傳圖片

現在，如果您喜歡使用

Filestack 等外部服務，它提供文件託管、CDN 和高效的圖像處理，請按照以下步驟操作。

步驟1：安裝Filestack

首先，我們需要在您的 Next.js 專案中安裝 Filestack 套件。

npm 安裝 filestack-js

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 (

); } 第 2 步：在前端設定 Filestack

接下來，讓我們在組件中設定 Filestack 小部件，以便用戶可以選擇和上傳圖像。這很簡單，因為 Filestack 提供了一個隨時可用的小工具。

這是一個範例實作：

從 'react' 導入 { useState }; 從“filestack-js”導入*作為檔案堆疊； const client = filestack.init('YOUR_API_KEY'); // 替換為您的 API 金鑰匯出預設函數 FilestackUpload() { const [imageUrl, setImageUrl] = useState(''); const handleUpload = async () => { const 結果 = 等待 client.picker({ onUploadDone: (res) => { setImageUrl(res.filesUploaded[0].url); console.log('檔案上傳：', res.filesUploaded[0].url); }, }）。打開（）; }; 返回（

{imageUrl && 上傳的圖片

}

）； }

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 (

); } 步驟 3：取得 Filestack API 金鑰

要讓 Filestack 正常運作，您需要在 Filestack 上建立帳戶並產生您的

API 金鑰。將上述程式碼中的 YOUR_API_KEY 替換為提供給您的金鑰。

第四步：顯示上傳的圖片

使用者上傳圖像後，您可以使用 Filestack 產生的 URL 顯示它：

{imageUrl && 上傳的圖片

}

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 (

); } 4. 結論

就是這樣！您現在有兩種方法來處理 Next.js 應用程式中的映像上傳：