Das Hochladen gro?er Dateien in die Cloud kann eine Herausforderung sein – Netzwerkunterbrechungen, Browsereinschr?nkungen und gro?e Dateigr??en k?nnen den Prozess leicht st?ren. Amazon S3 (Simple Storage Service) ist ein skalierbarer, webbasierter Hochgeschwindigkeits-Cloud-Speicherdienst, der für die Online-Sicherung und Archivierung von Daten und Anwendungen entwickelt wurde. Das Hochladen gro?er Dateien auf S3 erfordert jedoch eine sorgf?ltige Handhabung, um Zuverl?ssigkeit und Leistung sicherzustellen.

Nutzen Sie den mehrteiligen Upload von AWS S3: eine leistungsstarke L?sung, die gro?e Dateien in kleinere Teile aufteilt und so schnellere und zuverl?ssigere Uploads erm?glicht, indem sie jeden Teil unabh?ngig angeht und Teile sogar parallel hochl?dt. Diese Methode überwindet nicht nur Dateigr??enbeschr?nkungen (S3 erfordert einen mehrteiligen Upload für Dateien, die gr??er als 5 GB sind), sondern minimiert auch das Fehlerrisiko und eignet sich daher perfekt für Anwendungen, die nahtlose, robuste Datei-Uploads ben?tigen.

In diesem Leitfaden erl?utern wir die Besonderheiten clientseitiger Multipart-Uploads auf S3 und zeigen Ihnen, warum es die kluge Wahl für den Umgang mit gro?en Dateien ist, wie Sie es sicher zum Laufen bringen und welche Herausforderungen Sie im Auge behalten müssen raus für. Ich stelle Schritt-für-Schritt-Anleitungen, Codebeispiele und Best Practices zur Verfügung, um Sie bei der Implementierung einer zuverl?ssigen clientseitigen Datei-Upload-L?sung zu unterstützen.

Sind Sie bereit, Ihr Datei-Upload-Erlebnis zu verbessern? Lasst uns eintauchen!

Server- vs. clientseitige Uploads

Beim Entwerfen eines Datei-Upload-Systems haben Sie zwei Hauptoptionen: Hochladen von Dateien über Ihren Server (serverseitig) oder Hochladen von Dateien direkt vom Client auf S3 (clientseitig). Jeder Ansatz hat seine Vor- und Nachteile.

Serverseitige Uploads

Vorteile:

• Erh?hte Sicherheit: Alle Uploads werden vom Server verwaltet, sodass die AWS-Anmeldeinformationen sicher bleiben.

• Bessere Fehlerbehandlung: Server k?nnen Wiederholungsversuche, Protokollierung und Fehlerbehandlung robuster verwalten.

• Zentralisierte Verarbeitung: Dateien k?nnen auf dem Server validiert, verarbeitet oder konvertiert werden, bevor sie in S3 gespeichert werden.

Nachteile:

• H?here Serverlast: Gro?e Uploads verbrauchen Serverressourcen (CPU, Speicher, Bandbreite), was sich auf die Leistung auswirken und die Betriebskosten erh?hen kann.

• Potenzielle Engp?sse: Der Server kann bei hohem Upload-Verkehr zu einem Single Point of Failure oder einem Leistungsengpass werden, was zu langsamen Uploads oder Ausfallzeiten führt.

• Erh?hte Kosten: Die serverseitige Bearbeitung von Uploads erfordert m?glicherweise eine Skalierung Ihrer Infrastruktur, um Spitzenlasten zu bew?ltigen, was zu h?heren Betriebskosten führt.

Clientseitige Uploads

Vorteile:

• Reduzierte Serverlast: Dateien werden direkt vom Ger?t des Benutzers an S3 gesendet, wodurch Serverressourcen freigegeben werden.

• Verbesserte Geschwindigkeit: Benutzer erleben schnellere Uploads, da sie den Anwendungsserver umgehen.

• Kosteneffizienz: Macht eine Serverinfrastruktur zur Verarbeitung gro?er Uploads überflüssig und senkt m?glicherweise die Kosten.

• Skalierbarkeit: Ideal zum Skalieren von Datei-Uploads, ohne Backend-Server zu belasten.

Nachteile:

• Sicherheitsrisiken: Erfordert einen sorgf?ltigen Umgang mit AWS-Anmeldeinformationen und -Berechtigungen. Vorsignierte URLs müssen sicher generiert werden, um unbefugten Zugriff zu verhindern.

• Eingeschr?nkte Kontrolle: Weniger serverseitige Kontrolle über Uploads; Fehlerbehandlung und Wiederholungsversuche werden oft auf dem Client verwaltet.

• Browsereinschr?nkungen: Browser haben Speicher- und API-Einschr?nkungen, die die Verarbeitung sehr gro?er Dateien behindern oder die Leistung auf Ger?ten der unteren Preisklasse beeintr?chtigen k?nnen.

Schritt-für-Schritt-Anleitung zur Implementierung sicherer clientseitiger Uploads

Die sichere Implementierung clientseitiger Uploads erfordert die Koordination zwischen Ihrer Frontend-Anwendung und einem sicheren Backend-Dienst. Die Hauptaufgabe des Backend-Dienstes besteht darin, vorsignierte URLs zu generieren, die es dem Client erm?glichen, Dateien direkt auf S3 hochzuladen, ohne vertrauliche AWS-Anmeldeinformationen preiszugeben.

Voraussetzungen

• AWS-Konto: Zugriff auf ein AWS-Konto mit Berechtigungen zur Verwendung von S3.
• AWS SDK-Kenntnisse: Vertrautheit mit dem AWS SDK für JavaScript (v3) oder dem Durchführen direkter API-Aufrufe an AWS-Dienste.
• Frontend- und Backend-Entwicklungsf?higkeiten: Verst?ndnis sowohl der clientseitigen (JavaScript, React usw.) als auch der serverseitigen (Node.js, Express usw.) Programmierung.

1. Einrichten der richtigen Architektur

Um clientseitige Uploads effektiv zu implementieren, ben?tigen Sie:

• Frontend-Anwendung: Verwaltet die Dateiauswahl, teilt Dateien bei Bedarf in Teile auf und l?dt Teile mithilfe vorsignierter URLs in S3 hoch.
• Backend-Dienst: Ein sicherer Server, der APIs zum Generieren vorsignierter URLs und zum Initialisieren oder Abschlie?en mehrteiliger Uploads bereitstellt. Es schützt Ihre AWS-Anmeldeinformationen und erzwingt alle erforderlichen Gesch?ftslogiken oder Validierungen.

Diese Architektur stellt sicher, dass sensible Vorg?nge sicher im Backend abgewickelt werden, w?hrend das Frontend den Upload-Prozess verwaltet.

2. Erstellen des Upload-Dienstes im Backend

Warum vorsignierte URLs verwenden?

Vordefinierte URLs erm?glichen es Clients, direkt mit S3 zu interagieren und Vorg?nge wie das Hochladen von Dateien auszuführen, ohne dass AWS-Anmeldeinformationen auf der Clientseite erforderlich sind. Sie sind sicher, weil:

• Sie sind zeitlich begrenzt und verfallen nach einer bestimmten Dauer.
• Sie k?nnen auf bestimmte Vorg?nge beschr?nkt werden (z. B. PUT zum Hochladen).
• Sie sind spezifisch für einen bestimmten S3-Objektschlüssel.

Implementierung des S3UploadService

Erstellen Sie auf Ihrem Server eine Serviceklasse, die verantwortlich ist für:

a. Definieren des S3-Buckets und der Region
B. AWS-Anmeldeinformationen sicher einrichten.
C. Bereitstellung von Methoden zum Generieren vorsignierter URLs und zum Verwalten mehrteiliger Uploads.

// services/S3UploadService.js

import {
  S3Client,
  CreateMultipartUploadCommand,
  CompleteMultipartUploadCommand,
  UploadPartCommand,
  AbortMultipartUploadCommand,
  PutObjectCommand,
  GetObjectCommand,
  DeleteObjectCommand,
} from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

// Import credential providers
import {
  fromIni,
  fromInstanceMetadata,
  fromEnv,
  fromProcess,
} from '@aws-sdk/credential-providers';

export class S3UploadService {
  constructor() {
    this.s3BucketName = process.env.S3_BUCKET_NAME;
    this.s3Region = process.env.S3_REGION;

    this.s3Client = new S3Client({
      region: this.s3Region,
      credentials: this.getS3ClientCredentials(),
    });
  }

  // Method to generate AWS credentials securely
  getS3ClientCredentials() {
    if (process.env.NODE_ENV === 'development') {
      // In development, use credentials from environment variables
      return fromEnv();
    } else {
      // In production, use credentials from EC2 instance metadata or another secure method
      return fromInstanceMetadata();
    }
  }

  // Generate a presigned URL for single-part upload (PUT), download (GET), or deletion (DELETE)
  async generatePresignedUrl(key, operation) {
    let command;
    switch (operation) {
      case 'PUT':
        command = new PutObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'GET':
        command = new GetObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'DELETE':
        command = new DeleteObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      default:
        throw new Error(`Invalid operation "${operation}"`);
    }

    // Generate presigned URL
    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 }); // Expires in 1 hour
  }

  // Methods for multipart upload
  async createMultipartUpload(key) {
    const command = new CreateMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
    });
    const response = await this.s3Client.send(command);
    return response.UploadId;
  }

  async generateUploadPartUrl(key, uploadId, partNumber) {
    const command = new UploadPartCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      PartNumber: partNumber,
    });

    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 });
  }

  async completeMultipartUpload(key, uploadId, parts) {
    const command = new CompleteMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      MultipartUpload: { Parts: parts },
    });
    return await this.s3Client.send(command);
  }

  async abortMultipartUpload(key, uploadId) {
    const command = new AbortMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
    });
    return await this.s3Client.send(command);
  }
}

Hinweis: Stellen Sie sicher, dass Ihre AWS-Anmeldeinformationen sicher verwaltet werden. In der Produktion wird empfohlen, IAM-Rollen zu verwenden, die Ihren EC2-Instanzen oder ECS-Aufgaben zugeordnet sind, anstatt Anmeldeinformationen fest zu codieren oder Umgebungsvariablen zu verwenden.

3. Implementierung der Backend-API-Endpunkte

Erstellen Sie API-Endpunkte in Ihrem Backend, um Anfragen vom Frontend zu verarbeiten. Diese Endpunkte nutzen den S3UploadService, um Aktionen auszuführen.

// controllers/S3UploadController.js

import { S3UploadService } from '../services/S3UploadService';

const s3UploadService = new S3UploadService();

export const generatePresignedUrl = async (req, res, next) => {
  try {
    const { key, operation } = req.body; // key is the S3 object key (file identifier)
    const url = await s3UploadService.generatePresignedUrl(key, operation);
    res.status(200).json({ url });
  } catch (error) {
    next(error);
  }
};

export const initializeMultipartUpload = async (req, res, next) => {
  try {
    const { key } = req.body;
    const uploadId = await s3UploadService.createMultipartUpload(key);
    res.status(200).json({ uploadId });
  } catch (error) {
    next(error);
  }
};

export const generateUploadPartUrls = async (req, res, next) => {
  try {
    const { key, uploadId, parts } = req.body; // parts is the number of parts
    const urls = await Promise.all(
      [...Array(parts).keys()].map(async (index) => {
        const partNumber = index + 1;
        const url = await s3UploadService.generateUploadPartUrl(key, uploadId, partNumber);
        return { partNumber, url };
      })
    );
    res.status(200).json({ urls });
  } catch (error) {
    next(error);
  }
};

export const completeMultipartUpload = async (req, res, next) => {
  try {
    const { key, uploadId, parts } = req.body; // parts is an array of { ETag, PartNumber }
    const result = await s3UploadService.completeMultipartUpload(key, uploadId, parts);
    res.status(200).json({ result });
  } catch (error) {
    next(error);
  }
};

export const abortMultipartUpload = async (req, res, next) => {
  try {
    const { key, uploadId } = req.body;
    await s3UploadService.abortMultipartUpload(key, uploadId);
    res.status(200).json({ message: 'Upload aborted' });
  } catch (error) {
    next(error);
  }
};

Richten Sie die Routen für diese Endpunkte in Ihrer Express-App oder dem von Ihnen verwendeten Framework ein.

4. Implementierung der Frontend-Uploader-Klasse

Das Frontend übernimmt die Auswahl der Dateien, entscheidet anhand der Dateigr??e, ob ein einteiliger oder mehrteiliger Upload durchgeführt werden soll, und verwaltet den Upload-Prozess.

Im Allgemeinen empfiehlt AWS: ?Wenn Ihre Objektgr??e 100 MB erreicht, sollten Sie mehrteilige Uploads in Betracht ziehen, anstatt das Objekt in einem einzigen Vorgang hochzuladen.“ Quelle

// services/S3UploadService.js

import {
  S3Client,
  CreateMultipartUploadCommand,
  CompleteMultipartUploadCommand,
  UploadPartCommand,
  AbortMultipartUploadCommand,
  PutObjectCommand,
  GetObjectCommand,
  DeleteObjectCommand,
} from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

// Import credential providers
import {
  fromIni,
  fromInstanceMetadata,
  fromEnv,
  fromProcess,
} from '@aws-sdk/credential-providers';

export class S3UploadService {
  constructor() {
    this.s3BucketName = process.env.S3_BUCKET_NAME;
    this.s3Region = process.env.S3_REGION;

    this.s3Client = new S3Client({
      region: this.s3Region,
      credentials: this.getS3ClientCredentials(),
    });
  }

  // Method to generate AWS credentials securely
  getS3ClientCredentials() {
    if (process.env.NODE_ENV === 'development') {
      // In development, use credentials from environment variables
      return fromEnv();
    } else {
      // In production, use credentials from EC2 instance metadata or another secure method
      return fromInstanceMetadata();
    }
  }

  // Generate a presigned URL for single-part upload (PUT), download (GET), or deletion (DELETE)
  async generatePresignedUrl(key, operation) {
    let command;
    switch (operation) {
      case 'PUT':
        command = new PutObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'GET':
        command = new GetObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'DELETE':
        command = new DeleteObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      default:
        throw new Error(`Invalid operation "${operation}"`);
    }

    // Generate presigned URL
    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 }); // Expires in 1 hour
  }

  // Methods for multipart upload
  async createMultipartUpload(key) {
    const command = new CreateMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
    });
    const response = await this.s3Client.send(command);
    return response.UploadId;
  }

  async generateUploadPartUrl(key, uploadId, partNumber) {
    const command = new UploadPartCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      PartNumber: partNumber,
    });

    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 });
  }

  async completeMultipartUpload(key, uploadId, parts) {
    const command = new CompleteMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      MultipartUpload: { Parts: parts },
    });
    return await this.s3Client.send(command);
  }

  async abortMultipartUpload(key, uploadId) {
    const command = new AbortMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
    });
    return await this.s3Client.send(command);
  }
}

Anwendungsbeispiel

// controllers/S3UploadController.js

import { S3UploadService } from '../services/S3UploadService';

const s3UploadService = new S3UploadService();

export const generatePresignedUrl = async (req, res, next) => {
  try {
    const { key, operation } = req.body; // key is the S3 object key (file identifier)
    const url = await s3UploadService.generatePresignedUrl(key, operation);
    res.status(200).json({ url });
  } catch (error) {
    next(error);
  }
};

export const initializeMultipartUpload = async (req, res, next) => {
  try {
    const { key } = req.body;
    const uploadId = await s3UploadService.createMultipartUpload(key);
    res.status(200).json({ uploadId });
  } catch (error) {
    next(error);
  }
};

export const generateUploadPartUrls = async (req, res, next) => {
  try {
    const { key, uploadId, parts } = req.body; // parts is the number of parts
    const urls = await Promise.all(
      [...Array(parts).keys()].map(async (index) => {
        const partNumber = index + 1;
        const url = await s3UploadService.generateUploadPartUrl(key, uploadId, partNumber);
        return { partNumber, url };
      })
    );
    res.status(200).json({ urls });
  } catch (error) {
    next(error);
  }
};

export const completeMultipartUpload = async (req, res, next) => {
  try {
    const { key, uploadId, parts } = req.body; // parts is an array of { ETag, PartNumber }
    const result = await s3UploadService.completeMultipartUpload(key, uploadId, parts);
    res.status(200).json({ result });
  } catch (error) {
    next(error);
  }
};

export const abortMultipartUpload = async (req, res, next) => {
  try {
    const { key, uploadId } = req.body;
    await s3UploadService.abortMultipartUpload(key, uploadId);
    res.status(200).json({ message: 'Upload aborted' });
  } catch (error) {
    next(error);
  }
};

5. Sicherheitsüberlegungen und Best Practices

• Vorsignierte URL-Berechtigungen einschr?nken: Stellen Sie sicher, dass vorsignierte URLs nur die erforderlichen Berechtigungen gew?hren (z. B. nur PUT-Vorg?nge für Uploads zulassen).
• Geeignete Ablaufzeiten festlegen: Vorsignierte URLs sollten nach einer angemessenen Zeit (z. B. 15 Minuten bis 1 Stunde) ablaufen, um das Zeitfenster für Missbrauch zu minimieren.
• Dateimetadaten validieren: Validieren Sie im Backend alle vom Client gesendeten Metadaten oder Parameter, um Manipulationen zu verhindern (z. B. Erzwingen zul?ssiger Dateitypen oder -gr??en).
• HTTPS verwenden: Verwenden Sie immer HTTPS für die Kommunikation zwischen dem Client und Ihrem Backend und beim Zugriff auf S3, um Daten w?hrend der übertragung zu schützen.
• überwachen und protokollieren: Implementieren Sie Protokollierung und überwachung sowohl im Backend als auch in S3, um ungew?hnliche Aktivit?ten oder Fehler zu erkennen.

6. Zus?tzliche überlegungen

Begrenzung der Objektgr??e

W?hrend AWS S3 Objekte mit einer Gr??e von bis zu 5 TiB (Terabyte) unterstützt, ist das Hochladen solch gro?er Dateien direkt aus einem Browser aufgrund von Browserbeschr?nkungen und clientseitigen Ressourcenbeschr?nkungen unpraktisch und oft unm?glich. Browser k?nnen abstürzen oder nicht mehr reagieren, wenn sie extrem gro?e Dateien verarbeiten, insbesondere wenn sie im Speicher verarbeitet werden müssen.

Empfehlung:

• Praktische Grenzen festlegen: Definieren Sie eine maximale Dateigr??e, die Ihre Anwendung für clientseitige Uploads unterstützt (z. B. 100 GB oder weniger).
• Benutzer informieren: Geben Sie den Benutzern Feedback zur maximal zul?ssigen Dateigr??e und führen Sie die Validierung auf der Clientseite durch, bevor Sie den Upload starten.

Wiederholungsstrategie

Das Hochladen gro?er Dateien erh?ht das Risiko von Netzwerkunterbrechungen oder Ausf?llen w?hrend des Upload-Vorgangs. Die Implementierung einer robusten Wiederholungsstrategie ist entscheidend, um das Benutzererlebnis zu verbessern und erfolgreiche Uploads sicherzustellen.

Strategien

• Automatische Wiederholungsversuche: Fehlgeschlagene Teile automatisch eine begrenzte Anzahl von Malen wiederholen, bevor der Benutzer dazu aufgefordert wird.
• Fortsetzbare Uploads: Behalten Sie den überblick über hochgeladene Teile, damit der Upload dort fortgesetzt werden kann, wo er aufgeh?rt hat, anstatt von vorne zu beginnen.
• Fehlerbehandlung: Stellen Sie dem Benutzer informative Fehlermeldungen zur Verfügung, wenn Wiederholungsversuche fehlschlagen, und schlagen Sie m?glicherweise Aktionen wie die überprüfung seiner Netzwerkverbindung vor.

Mehrteilige Upload-Bereinigung

Unvollst?ndige mehrteilige Uploads k?nnen sich in Ihrem S3-Bucket ansammeln, Speicherplatz verbrauchen und m?glicherweise Kosten verursachen.

überlegungen

• Unvollendete Uploads abbrechen: Wenn ein Upload fehlschl?gt oder abgebrochen wird, stellen Sie sicher, dass Ihre Anwendung die AbortMultipartUpload-API aufruft, um alle hochgeladenen Teile zu bereinigen.
• Lebenszyklusregeln: Konfigurieren Sie S3-Lebenszyklusrichtlinien, um unvollst?ndige mehrteilige Uploads nach einem bestimmten Zeitraum (z. B. 7 Tage) automatisch abzubrechen. Dies hilft bei der Verwaltung der Lagerkosten und h?lt Ihren Eimer sauber.

Beispiel für die Konfiguration einer Lebenszyklusregel:

// services/S3UploadService.js

import {
  S3Client,
  CreateMultipartUploadCommand,
  CompleteMultipartUploadCommand,
  UploadPartCommand,
  AbortMultipartUploadCommand,
  PutObjectCommand,
  GetObjectCommand,
  DeleteObjectCommand,
} from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

// Import credential providers
import {
  fromIni,
  fromInstanceMetadata,
  fromEnv,
  fromProcess,
} from '@aws-sdk/credential-providers';

export class S3UploadService {
  constructor() {
    this.s3BucketName = process.env.S3_BUCKET_NAME;
    this.s3Region = process.env.S3_REGION;

    this.s3Client = new S3Client({
      region: this.s3Region,
      credentials: this.getS3ClientCredentials(),
    });
  }

  // Method to generate AWS credentials securely
  getS3ClientCredentials() {
    if (process.env.NODE_ENV === 'development') {
      // In development, use credentials from environment variables
      return fromEnv();
    } else {
      // In production, use credentials from EC2 instance metadata or another secure method
      return fromInstanceMetadata();
    }
  }

  // Generate a presigned URL for single-part upload (PUT), download (GET), or deletion (DELETE)
  async generatePresignedUrl(key, operation) {
    let command;
    switch (operation) {
      case 'PUT':
        command = new PutObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'GET':
        command = new GetObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      case 'DELETE':
        command = new DeleteObjectCommand({
          Bucket: this.s3BucketName,
          Key: key,
        });
        break;
      default:
        throw new Error(`Invalid operation "${operation}"`);
    }

    // Generate presigned URL
    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 }); // Expires in 1 hour
  }

  // Methods for multipart upload
  async createMultipartUpload(key) {
    const command = new CreateMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
    });
    const response = await this.s3Client.send(command);
    return response.UploadId;
  }

  async generateUploadPartUrl(key, uploadId, partNumber) {
    const command = new UploadPartCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      PartNumber: partNumber,
    });

    return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 });
  }

  async completeMultipartUpload(key, uploadId, parts) {
    const command = new CompleteMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
      MultipartUpload: { Parts: parts },
    });
    return await this.s3Client.send(command);
  }

  async abortMultipartUpload(key, uploadId) {
    const command = new AbortMultipartUploadCommand({
      Bucket: this.s3BucketName,
      Key: key,
      UploadId: uploadId,
    });
    return await this.s3Client.send(command);
  }
}

Umgang mit mehrteiligen Uploads au?erhalb des Hauptthreads

Das Hochladen gro?er Dateien kann ressourcenintensiv sein und dazu führen, dass der Hauptthread des Browsers nicht mehr reagiert, was zu einer schlechten Benutzererfahrung führt.

L?sung:

• Web Worker verwenden: Verlagern Sie den Upload-Prozess auf einen Web Worker. Web Worker werden im Hintergrund ausgeführt, getrennt vom Hauptausführungsthread der Webanwendung, sodass Sie ressourcenintensive Vorg?nge ausführen k?nnen, ohne die Benutzeroberfl?che zu blockieren.

Vorteile:

• Verbesserte Leistung: Macht den Hauptthread frei und stellt sicher, dass die Benutzeroberfl?che w?hrend des Upload-Vorgangs reaktionsf?hig bleibt.
• Reduzierte Speichernutzung: Hilft bei der effektiveren Speicherverwaltung, da die Verarbeitung gro?er Datenmengen innerhalb des Workers abgewickelt werden kann.
• Verbesserte Stabilit?t: Reduziert das Risiko, dass der Browser bei gro?en Uploads nicht mehr reagiert oder abstürzt.

7. überlegungen zur Browserkompatibilit?t

Bei der Implementierung clientseitiger mehrteiliger Uploads ist die Browserkompatibilit?t tats?chlich ein Problem. Verschiedene Browser verfügen m?glicherweise über unterschiedliche Unterstützungsstufen für die APIs und Funktionen, die für die Verarbeitung gro?er Datei-Uploads erforderlich sind, wie z. B. die *Datei-API, Blob-Slicing, Web Worker und Netzwerkanfrageverarbeitung* . Die erfolgreiche Bew?ltigung dieser Unterschiede ist entscheidend, um eine konsistente und zuverl?ssige Benutzererfahrung in allen unterstützten Browsern sicherzustellen.

Kompatibilit?tsbedenken:

• Datei-API und Blob-Methoden: Die meisten modernen Browser unterstützen Blob.slice(), ?ltere Browser verwenden jedoch m?glicherweise Blob.webkitSlice() oder Blob.mozSlice().
• Web Worker: Wird in modernen Browsern unterstützt, jedoch nicht in einigen ?lteren oder mit Einschr?nkungen im Internet Explorer.
• Abruf-API und XMLHttpRequest: Obwohl fetch() weithin unterstützt wird, sind Upload-Fortschrittsereignisse mit fetch() nicht in allen Browsern konsistent verfügbar.
• Maximale gleichzeitige Verbindungen: Begrenzen Sie die Anzahl gleichzeitiger Uploads basierend auf dem kleinsten gemeinsamen Nenner Ihrer unterstützten Browser (z. B. 6 gleichzeitige Verbindungen).
• Speicherbeschr?nkungen: Verarbeiten Sie Dateien in kleinen Bl?cken und vermeiden Sie, die gesamte Datei auf einmal in den Speicher zu laden.
• CORS: Konfigurieren Sie S3 CORS-Richtlinien zur Unterstützung der erforderlichen HTTP-Methoden (z. B. PUT, POST) und Header.

Abschluss

Durch die Implementierung clientseitiger Uploads mit vorsignierten URLs und mehrteiligem Upload k?nnen Sie Datei-Uploads jeder Gr??e direkt in S3 effizient verarbeiten, wodurch die Serverlast reduziert und die Leistung verbessert wird. Denken Sie daran, die Sicherheit im Vordergrund zu halten, indem Sie AWS-Anmeldeinformationen sicher verwalten und die Berechtigungen und die Lebensdauer vorsignierter URLs begrenzen.

Diese Anleitung bietet einen schrittweisen Ansatz zum Einrichten eines sicheren und skalierbaren Datei-Upload-Systems mit AWS S3, dem AWS SDK für JavaScript und vorsignierten URLs. Mit den bereitgestellten Codebeispielen und Best Practices sind Sie auf dem besten Weg, die Datei-Upload-Funktionen Ihrer Anwendung zu verbessern.

Das obige ist der detaillierte Inhalt vonOptimierung gro?er Datei-Uploads: Sichere clientseitige mehrteilige Uploads auf AWS S3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!