React DropZone实现拖拽上传Zip文件并解压至指定文件夹的方案

Hey there! Let's adjust your React Dropzone setup to only accept ZIP files, then add the upload and extraction logic. I'll break this down step by step with code examples tailored to your existing Next.js setup.

Step 1: Update Dropzone to Accept Only ZIP Files #

First, we need to tweak the accept prop to target ZIP MIME types, and update the instructional text to reflect the new allowed file type. Here's your modified component with these changes, plus a basic upload handler:

import React, { Component } from 'react';
import Link from 'next/link'
import Head from '../components/head'
import Nav from '../components/nav'
import Dropzone from 'react-dropzone'

export default class DnD extends Component {
  constructor() {
    super()
    this.state = {
      accepted: [],
      rejected: [],
      processStatus: ''
    }
  }

  // Handle sending the ZIP file to your backend for extraction
  handleZipUpload = async (file) => {
    const formData = new FormData();
    formData.append('zipFile', file);

    try {
      this.setState({ processStatus: 'Uploading and extracting your file...' });
      const response = await fetch('/api/process-zip', {
        method: 'POST',
        body: formData
      });

      if (response.ok) {
        const result = await response.json();
        this.setState({ 
          processStatus: `Success! Files extracted to: ${result.targetFolder}` 
        });
      } else {
        throw new Error('Failed to process your file');
      }
    } catch (err) {
      this.setState({ processStatus: `Error: ${err.message}` });
    }
  }

  render() {
    return (
      <section>
        <div className="dropzone">
          <Dropzone 
            accept="application/zip, application/x-zip-compressed" 
            onDrop={(accepted, rejected) => {
              this.setState({ accepted, rejected });
              // Process each accepted ZIP file
              accepted.forEach(file => this.handleZipUpload(file));
            }} 
          >
            <p>Try dropping a ZIP file here, or click to select one to upload.</p>
            <p>Only *.zip files will be accepted</p>
          </Dropzone>
        </div>
        {this.state.processStatus && <p className="status-message">{this.state.processStatus}</p>}
        <aside>
          <h2>Accepted files</h2>
          <ul>
            { this.state.accepted.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>) }
          </ul>
          <h2>Rejected files</h2>
          <ul>
            { this.state.rejected.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>) }
          </ul>
        </aside>
      </section>
    );
  }
}

Step 2: Backend Setup (Next.js API Route) #

Since you're using Next.js, we'll create an API route to handle the file upload and server-side extraction. First, install a reliable ZIP processing library:

npm install adm-zip

Then create /pages/api/process-zip.js with this code to handle file reception, folder creation, and extraction:

import AdmZip from 'adm-zip';
import fs from 'fs';
import path from 'path';
import { IncomingForm } from 'formidable';

// Disable default body parsing to handle file uploads
export const config = {
  api: {
    bodyParser: false
  }
};

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const form = new IncomingForm();
  
  form.parse(req, async (err, fields, files) => {
    if (err) {
      return res.status(500).json({ error: 'Failed to parse uploaded file' });
    }

    const zipFile = files.zipFile;
    if (!zipFile) {
      return res.status(400).json({ error: 'No ZIP file provided' });
    }

    // Define your target extraction folder (adjust this path to your needs)
    const targetFolder = path.join(process.cwd(), 'extracted-zip-contents');
    
    // Create the folder if it doesn't exist (recursive creates parent folders too)
    if (!fs.existsSync(targetFolder)) {
      fs.mkdirSync(targetFolder, { recursive: true });
    }

    try {
      // Extract the entire ZIP to the target folder
      const zip = new AdmZip(zipFile.filepath);
      zip.extractAllTo(targetFolder, true); // `true` overwrites existing files if needed

      res.status(200).json({ 
        message: 'ZIP file extracted successfully',
        targetFolder: targetFolder
      });
    } catch (extractErr) {
      res.status(500).json({ error: `Failed to extract ZIP: ${extractErr.message}` });
    }
  });
}

Optional: Frontend-Only Extraction (No Backend) #

If you want to extract the ZIP directly in the browser without sending it to a server, use the jszip library instead:

1. Install the library:

npm install jszip

2. Replace the handleZipUpload function in your React component with this frontend extraction logic:

import JSZip from 'jszip';

// ...

handleFrontendExtraction = async (file) => {
  try {
    this.setState({ processStatus: 'Extracting file in browser...' });
    const zip = await JSZip.loadAsync(file);
    
    // Iterate through all files in the ZIP archive
    zip.forEach(async (relativePath, zipEntry) => {
      if (!zipEntry.dir) { // Skip directories, process only files
        // Get file content (use 'blob' for images/binary files instead of 'text')
        const content = await zipEntry.async('text');
        // Do something with the content (e.g., display, save to browser storage)
        console.log(`Extracted file: ${relativePath}`, content);
      }
    });

    this.setState({ processStatus: 'Extraction complete!' });
  } catch (err) {
    this.setState({ processStatus: `Extraction error: ${err.message}` });
  }
}

内容的提问来源于stack exchange，提问作者Makis Kahrimanidis