Verwenden Sie JS plupload, um Bilder stapelweise direkt in Youpai Cloud_javascript skills hochzuladen

Foren oder Beitragsleisten müssen oft viele Bilder teilen. Die schlechtere Möglichkeit, Bilder hochzuladen, besteht darin, sie auf einen zentralen Server hochzuladen, und der zentrale Server leitet sie dann an den statischen Bildserver weiter. In diesem Artikel erfahren Sie, wie Sie mit plupload den Upload-Prozess optimieren und Bilder unter Umgehung des Servers stapelweise direkt in die Youpai Cloud hochladen können. Dieser Artikel konzentriert sich auf die folgenden Kernpunkte:

Code kopieren Der Code lautet wie folgt:

plupload-Bibliothek
Lokale Komprimierung von Bildern
Mehrfachauswahl an Bildern
Umgehen Sie den Server und laden Sie Bilder stapelweise direkt in die Youpai Cloud hoch
Verwenden Sie die HTTP-FORM-API von Youpai
plupload-Konfiguration

plupload-Bibliothek

plupload ist ein sehr umfangreiches Plug-in zum Hochladen von Bildern. Batch-Uploads können über Flash/Silverligh/HTML4 für Browser niedrigerer Versionen unterstützt werden, während für Browser höherer Versionen zunächst die HTML5-Schnittstelle zum Hochladen verwendet wird. Alle diese Bestimmungen erfolgen automatisch und man kann sagen, dass sie sehr bequem zu verwenden sind ! Zweitens unterstützt plupload auch Funktionen wie das Komprimieren von Bildern auf der Clientseite und das direkte Hochladen per Drag & Drop. Weitere Informationen finden Sie auf der offiziellen Website.

Hier verwenden wir nur die Kern-API und müssen nur eine Datei einführen.

Code kopieren Der Code lautet wie folgt:

Das offizielle Kern-API-Beispiel ist sehr einfach. Sie können es direkt zu http://www.plupload.com/examples/core ansehen. Es gibt keine Schwierigkeiten, die Kern-API zu verstehen. Wenn Sie Hilfe benötigen, können Sie mir später in diesem Artikel Fragen stellen.

Lokale Komprimierung von Bildern

Im Allgemeinen ist die Qualität der im Internet angezeigten Bilder nicht hoch. Als ich in der High School PS lernte, sagte der Lehrer, dass die Auflösung von Online-Bildern auf 72 eingestellt werden sollte, und für gedruckte Bilder sollte dies der Fall sein auf 300 eingestellt werden. Wenn ein Benutzer ein großes Foto hochlädt, besteht ein besserer Ansatz darin, dass der Client des Benutzers das Bild lokal komprimiert und das komprimierte kleinere Bild hochlädt, was den Browsing-Effekt nicht beeinträchtigt und auch die Upload-Geschwindigkeit beschleunigen kann, wodurch die Belastung verringert wird auf dem Server.

Die lokale Komprimierungsfunktion von Bildern wird in plupload unterstützt. Übergeben Sie einfach einen Größenänderungsparameter, wenn Sie es initialisieren. Unter ihnen können Breite und Höhe entsprechend der tatsächlichen Situation eingestellt werden, und die Qualität ist ein wichtigerer Parameter. Wie der Name schon sagt, wird das Bild umso kleiner, aber die Anzeigequalität wird schlechter . Das müssen Sie selbst abwägen.

Code kopieren Der Code lautet wie folgt:

{
„Größe ändern“: {
„Breite“: 200,
„Höhe“: 200,
„Qualität“: 70
}
}

Mehrfachauswahl von Bildern

Eine Voraussetzung für das Stapel-Upload von Bildern ist die Möglichkeit, mehrere Bilder auszuwählen. Mehrfachauswahldateien sind eine Standardfunktion von HTML5. Wir können den Mehrfachauswahlmodus auf folgende Weise aktivieren:

Code kopieren Der Code lautet wie folgt:

Wählen Sie Bilder aus:

Laut dem Abschnitt „Mehrere Dateiauswahl“ der Browserunterstützung eines sehr hervorragenden JQuery-Plug-Ins „jQuery-File-Upload“ hat IE gerade erst damit begonnen, diese HTML5-Funktion bis IE10 zu unterstützen, sodass wir Flash verwenden müssen Die magische Kraft um die Auswahl mehrerer Bilder in Browsern niedrigerer Versionen zu unterstützen. Glücklicherweise hat plupload dies für uns erledigt und dieser Schalter ist standardmäßig aktiviert. Wenn Sie der Meinung sind, dass Sie Bilder mit Mehrfachauswahl nicht benötigen, können Sie multi_selection: false festlegen, um diese Funktion zu deaktivieren.

Umgehen des Servers und stapelweises direktes Hochladen von Bildern in die Youpai Cloud

Youpaiyun bietet eine HTTP-FORM-API. Über diese Schnittstelle können wir direkt eine Anfrage zum Hochladen von Bildern vom Browser aus initiieren, ohne sie über unseren eigenen Server übertragen zu müssen, was den Overhead erheblich reduziert.

Verwenden Sie die HTTP-FORM-API von Youpai

Um diese Schnittstelle nutzen zu können, müssen Sie ein Formular an Youpaiyun senden. Dieses Formular enthält die Dateien, die Sie hochladen möchten, und muss außerdem Richtlinien und Unterschrift enthalten. Mithilfe der Richtlinie werden Parameter für Upload-Anfragen festgelegt, z. B. Speicherpfad, Dateityp, Vorverarbeitungsergebnisse usw. Darüber hinaus enthält sie auch die Gewährungszeit für Upload-Anfragen usw. Die Signatur dient der Sicherheitsüberprüfung.

Zur Vereinfachung der Demonstration wird Javascript direkt zum Generieren von Richtlinien und Signaturen verwendet. Bei der tatsächlichen Verwendung schließen Sie diesen Vorgang aus Sicherheitsgründen jedoch bitte auf der Serverseite ab. Der folgende Code wurde basierend auf der offiziellen Demo leicht geändert und verwendet hauptsächlich das offizielle Testkonto. Informationen zur spezifischen Generierungsmethode dieser beiden Parameter finden Sie in der offiziellen Dokumentation: http://docs.upyun. api/form_api/.

Code kopieren Der Code lautet wie folgt:

var-Optionen = {
'bucket': 'demonstration',
'save-key': '/test/filename.txt',
'Ablauf': Math.floor(new Date().getTime() / 1000) 86400
};
// Weitere Parameter anzeigen: http://docs.upyun.com/api/form_api/#Einführung in die Form-API-Schnittstelle
var Policy = window.btoa(JSON.stringify(options));
// Formular-API vom UPYUN-Benutzerverwaltungshintergrund abrufen
var form_api_secret = '1 JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// Signatur berechnen
var Signatur = md5(policy '&' form_api_secret);

plupload-Konfiguration

Wie man Plupload mit der HTTP-FORM-API von Youpaiyun zum Laufen bringt, bereitet mir wirklich Kopfschmerzen. Als ich mir die Dokumentation von plupload ansah, entdeckte ich zufällig, dass mich der Link zum Hochladen auf Amazon S3 anzog. Der vollständige Name von Amazon S3 ist Amazon Simple Storage Service. Der bereitgestellte Cloud-Speicherdienst ähnelt mehr oder weniger Youpaiyun.

Auf der Grundlage der Einführung der browserseitigen Konfiguration in diesem Artikel habe ich herausgefunden, welche Konfiguration zum Hochladen auf Youpaiyun erforderlich ist. Tatsächlich ist es sehr einfach zu sagen, dass die Hauptsache darin besteht, die beiden Parameter URL und multipart_params zu konfigurieren. Im folgenden Beispiel verwenden „options.bucket“, „policy“ und „signatur“ direkt die im vorherigen Abschnitt berechneten Werte.

Code kopieren Der Code lautet wie folgt:

var uploader = new plupload.Uploader({
...
URL: 'http://v0.api.upyun.com/' options.bucket,
Multipart_params: {
          'Filename': '${filename}', // dies hinzufügen, um die Konsistenz über die Laufzeiten hinweg zu gewährleisten
         'Content-Type': '',
        'policy': Richtlinie,
        'signatur': Signatur,
},
...
});

Zusammenfassung

Auf diese Weise habe ich endlich die Möglichkeit erreicht, den Server durch Plupload zu umgehen und Bilder stapelweise in die Youpai Cloud hochzuladen. plupload ist wirklich eine sehr leistungsstarke Bibliothek, für die kommerzielle Nutzung ist jedoch eine Gebühr erforderlich. Weitere Informationen finden Sie auf der offiziellen Website.

Ist es nicht ganz einfach? Der Hauptgrund ist, dass die Idee sehr gut und lernenswert ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und wir können gemeinsam Fortschritte machen