Dies ist eine sehr einfache Lösung. Nun, es ist wahr.
Warum machen wir das?
Mit der boomenden Entwicklung des mobilen Webs gibt es heute zu viele Anwendungen, bei denen Benutzer Bilddateien in das mobile Web hochladen müssen Ich habe einige Schwierigkeiten, die überwunden werden müssen:
Langsamer Upload-Fortschritt bei niedriger Netzwerkgeschwindigkeit, schlechte Benutzererfahrung
Bei hoher Parallelität ist die Hintergrundverarbeitung großer hochgeladener Dateien stressig
Vielleicht gibt es solche mehr ...
Bei der Überwindung einiger der oben genannten Schwierigkeiten können wir uns auch einige Fragen stellen:
Ist es wirklich notwendig, die von Benutzern hochgeladenen Originalbilder zu speichern?
Benutzer Wie lange können wir warten?
Vielleicht gibt es noch mehr...
Wenn wir einige der oben genannten Schwierigkeiten und Fragen in Kombination mit unseren tatsächlichen Fällen kombinieren, können wir dies möglicherweise schaffen – Von Benutzern hochgeladen Beim Aufnehmen eines Bildes wird das Bild komprimiert, bevor es an den Hintergrund gesendet wird. Nachdem die Bilddateigröße reduziert wurde, erhöht sich natürlich die Upload-Geschwindigkeit. Bei gleicher Parallelität wird auch die Hintergrundverarbeitungsgeschwindigkeit verbessert und das Benutzererlebnis verbessert.
Einige Kinder fragen sich vielleicht: Warum nicht die Formularfunktion einiger Mainstream-CDNs verwenden, um Dateien direkt in das CDN hochzuladen? Ich habe nur eine von vielen Lösungen ausgewählt. Oder liegt das in der Natur von Programmierern?
Vorbereitung
Wie oben erwähnt: „Wenn der Benutzer das Bild hochlädt, wird das Bild komprimiert, bevor es an den Hintergrund gesendet wird“, dann bereiten wir uns vor verschiedene Tools sofort:
localResizeIMG (Kern, wird zum Komprimieren von Bildern im Frontend verwendet)
Vue.js (Frontend-Daten verarbeiten, Logik anzeigen)
Bootstrap ( Muss ich noch mehr sagen?)
Wie geht das?
Verwenden Sie nach dem Hochladen von Projektänderungen localResizeIMG zum Komprimieren
Stellen Sie die Daten Ihren Erwartungen gegenüber
Beim Aufruf von localResizeIMG können Sie die Breite, Höhe und Qualität des komprimierten Bildes angeben (weitere Informationen zum Senden der Daten an den Hintergrund finden Sie im Wiki der Bibliothek). , alles ist einfach.
Demo-Adresse
Repository-Adresse dieses Beispiels
Die Lösung in diesem Artikel ist nicht die einzige und auch nicht unbedingt die beste, die bei der Verwendung verwandter Frameworks/Bibliotheken auftritt Bei Fragen können Sie das entsprechende Github-Repository aufrufen, um das Problem oder das Wiki anzuzeigen.
