Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) · Pelajaran

Muat Naik Fail dengan Tindakan

Pelajari cara mengendalikan muat naik fail terus melalui Server Actions, termasuk penyimpanan dan pemprosesan yang selamat.

Pelajaran 2 daripada 311 langkah

Muat Naik Fail dengan Tindakan ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 3 pelajaran.

Memuat Naik Fail dengan Tindakan

Muat naik fail ialah ciri yang biasa digunakan, yang membolehkan pengguna berkongsi imej, dokumen dan banyak lagi. Secara tradisional, pengendalian perkara ini memerlukan laluan API dan pengendali berasingan yang rumit.

Dengan Tindakan Pelayan Next.js, pengendalian muat naik fail menjadi lebih mudah dan lebih bersepadu terus dalam borang anda, sambil mengekalkan logik di lokasi yang sama.

Menyediakan Input Fail

Untuk membolehkan muat naik fail, anda memerlukan borang HTML dengan persediaan khusus. Elemen <input type="file"> penting untuk memilih fail daripada peranti pengguna.

Gunakan atribut name untuk mengenal pasti fail dalam Tindakan Pelayan anda.
Tambahkan enctype="multipart/form-data" pada teg <form> anda. Hal ini memberitahu pelayar supaya mengekod data borang, termasuk fail, dengan betul.

<form action="/api/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="myFile" />
  <button type="submit">Upload</button>
</form>

Mendapatkan Fail melalui FormData

Apabila borang dengan enctype="multipart/form-data" dihantar kepada Tindakan Pelayan, Next.js menghuraikan data itu secara automatik menjadi objek FormData.

Anda boleh mengakses fail yang dimuat naik daripada objek FormData ini menggunakan kaedah get(), yang mengembalikan objek JavaScript File standard.

// app/actions.js
'use server';

export async function uploadFile(formData) {
  const file = formData.get('myFile');
  if (!file) {
    return { error: 'No file uploaded.' };
  }
  // 'file' is a File object
  console.log('File name:', file.name);
  console.log('File size:', file.size, 'bytes');
  console.log('File type:', file.type);
  return { success: true };
}

Meneroka Objek File

Objek File yang diterima dalam Tindakan Pelayan anda ialah objek API Web yang berkuasa. Objek ini menyediakan maklumat penting tentang fail yang dimuat naik:

name: Nama fail asal yang diberikan oleh pengguna.
size: Saiz fail dalam bait.
type: Jenis MIME fail (contohnya, "image/jpeg", "application/pdf").
arrayBuffer(): Kaedah tak segerak untuk mendapatkan kandungan fail sebagai ArrayBuffer, yang penting untuk menyimpannya.

Menyimpan Fail yang Dimuat Naik ke Cakera

Untuk menyimpan fail yang dimuat naik secara kekal, anda perlu mengekstrak kandungannya daripada objek File dan menulisnya ke lokasi storan. Kaedah arrayBuffer() membantu menukar fail kepada data binari mentah.

Selepas itu, anda boleh menggunakan modul terbina dalam fs/promises milik Node.js untuk menulis data ini ke sistem fail pelayan anda.

// app/actions.js (continued)
'use server';
import { writeFile } from 'fs/promises';
import path from 'path';

export async function saveUploadedFile(formData) {
  const file = formData.get('myFile');
  if (!file || file.size === 0) return { error: 'No file.' };

  const buffer = Buffer.from(await file.arrayBuffer());
  const filename = Date.now() + '-' + file.name; // Unique filename
  const filePath = path.join(process.cwd(), 'public/uploads', filename);

  try {
    await writeFile(filePath, buffer);
    console.log('File saved to:', filePath);
    return { success: true, filename };
  } catch (error) {
    console.error('Error saving file:', error);
    return { error: 'Failed to save file.' };
  }
}

Mengesahkan Muat Naik Fail

Adalah penting untuk mengesahkan fail yang dimuat naik pada bahagian pelayan bagi mencegah kelemahan keselamatan dan memastikan integriti data. Sentiasa semak:

Jenis Fail: Pastikan jenis MIME fail termasuk dalam jenis yang dibenarkan (contohnya, hanya imej dan bukan fail boleh laku).
Saiz Fail: Hadkan saiz maksimum untuk mencegah serangan penafian perkhidmatan atau penggunaan storan yang berlebihan.

Pengesahan pada bahagian klien membantu pengalaman pengguna tetapi boleh dipintas, jadi pemeriksaan pada bahagian pelayan adalah wajib.

Melaksanakan Pengesahan pada Bahagian Pelayan

Berikut ialah cara menambahkan pengesahan asas jenis dan saiz pada Tindakan Pelayan anda sebelum menyimpan fail. Hal ini menjadikan proses muat naik anda lebih kukuh dan selamat.

// app/actions.js (validation added)
'use server';
import { writeFile } from 'fs/promises';
import path from 'path';

const MAX_FILE_SIZE = 1024 * 1024 * 5; // 5MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'application/pdf'];

export async function validateAndSaveFile(formData) {
  const file = formData.get('myFile');
  if (!file || file.size === 0) return { error: 'No file.' };

  if (file.size > MAX_FILE_SIZE) {
    return { error: 'File too large (max 5MB).' };
  }
  if (!ALLOWED_TYPES.includes(file.type)) {
    return { error: 'Invalid file type.' };
  }

  const buffer = Buffer.from(await file.arrayBuffer());
  const filename = Date.now() + '-' + file.name;
  const filePath = path.join(process.cwd(), 'public/uploads', filename);

  await writeFile(filePath, buffer);
  return { success: true, filename };
}

Mengendalikan Muat Naik Berbilang Fail

Untuk membolehkan pengguna memuat naik berbilang fail serentak, tambahkan atribut multiple pada teg <input type="file">.

Pada pelayan, formData.getAll('myFiles') akan mengembalikan tatasusunan objek File, yang membolehkan anda mengulangi dan memproses setiap fail secara berasingan.

// HTML for multiple files:
<form action="/api/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="myFiles" multiple />
  <button type="submit">Upload</button>
</form>

// Server Action for multiple files:
'use server';

export async function uploadMultipleFiles(formData) {
  const files = formData.getAll('myFiles');
  if (!files || files.length === 0) return { error: 'No files.' };

  const uploadedNames = [];
  for (const file of files) {
    // Perform validation and saving for each file
    console.log('Processing file:', file.name);
    uploadedNames.push(file.name);
  }
  return { success: true, uploadedNames };
}

Melangkaui Storan Setempat

Walaupun menyimpan fail secara setempat sesuai untuk pembangunan dan projek kecil, aplikasi pengeluaran biasanya menggunakan penyelesaian storan awan demi kebolehskalaan, kebolehpercayaan dan keselamatan.

Pilihan popular termasuk AWS S3, Google Cloud Storage dan Cloudinary. Tindakan Pelayan boleh disepadukan terus dengan perkhidmatan ini dengan menghantar ArrayBuffer fail kepada SDK masing-masing, lalu menyediakan keupayaan storan yang kukuh.

Kuiz Muat Naik Fail

Antara atribut HTML berikut, yang manakah amat penting untuk borang asas menghantar data fail dengan betul kepada Tindakan Pelayan Next.js?

Jawab dalam pelajaran interaktif

Imbas Kembali & Langkah Seterusnya

Anda telah mempelajari cara mengendalikan muat naik fail menggunakan Tindakan Pelayan Next.js!

Sediakan borang HTML dengan enctype="multipart/form-data" dan <input type="file">.
Akses fail yang dimuat naik sebagai objek File daripada objek FormData dalam Tindakan Pelayan anda.
Simpan fail ke cakera menggunakan Node.js fs/promises dengan menukar kandungan objek File melalui Buffer.from(await file.arrayBuffer()).
Laksanakan pengesahan penting pada bahagian pelayan untuk jenis dan saiz fail bagi meningkatkan keselamatan.
Kendalikan muat naik berbilang fail dengan menambahkan atribut multiple pada input dan menggunakan formData.getAll().

Seterusnya, terokai cara menyediakan kemas kini UI optimistik untuk pengalaman pengguna yang lebih lancar selepas sesuatu tindakan!

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Muat Naik Fail dengan Tindakan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Muat Naik Fail dengan Tindakan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Muat Naik Fail dengan Tindakan”?

Pelajari cara mengendalikan muat naik fail terus melalui Server Actions, termasuk penyimpanan dan pemprosesan yang selamat. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 3.

Berapa lamakah pelajaran “Muat Naik Fail dengan Tindakan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?

Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Kemas Kini UI Optimistik
Muat Naik Fail dengan Tindakan
Pengesahan dan Pengendalian Ralat dalam Tindakan Pelayan

← Kembali ke Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)