Senden von Daten nach dem Hochladen von Bildern

Question

Meine Website verfügt über eine Funktion, mit der Benutzer Posts (wie Facebook) erstellen können. Ich habe ein Formular mit einem "Message" Eingabefeld und einer Schaltfläche, mit der Benutzer Bilder hochladen können.

Im Moment, wie ich den Code eingerichtet habe, ist, wenn der Benutzer das Formular übermittelt, mein Code die Daten zuerst einreichen und dann die Bilder hochladen.

Das Problem dabei ist, dass, wenn der Benutzer den Bildupload auf halbem Wege abbricht, der Datenbankeintrag existiert (weil die Daten vor dem Hochladen des Bildes übermittelt wurden), aber keine Bilder hochgeladen werden.

Also meine Lösung ist, die Bilder zuerst hochzuladen und die Daten danach zu übermitteln. Das Problem dabei ist, dass ich nicht sicher bin, wie ich die Bilder an die Daten in einem Datenbankeintrag binden kann.

Soll ich alle Bilder auf /tmp laden und dann die Dateien in einem permanenten Verzeichnis verschieben, wie /var/www/html/website/public/img/uploads/<upload_id> wo upload_id die id der Datenbank-Datensatz ist?

Was soll ich tun, wenn der Benutzer ein Bild hochlädt, aber die Registerkarte halb schließt. Dann wird es ein Bild in /tmp geben, das für immer dort bleiben wird, wenn das Verzeichnis nicht bereinigt wird. Wie würde ich es aufräumen?

Ist dies der beste Weg, oder gibt es bessere Möglichkeiten?

Ich benutze Laravel 5.3 und Dropzone.js.

Danke.

Answer 1

Da Sie Dropzone.js verwenden, die Dateien über Ajax hochgeladen werden können, können Sie diese auf folgende Weise tun:

1) senden Datei an den Back-End-Server mit Dropzone.js (Ajax).

2) Da Sie Laravel verwenden, jede Datei, die Sie eine Instanz von UploadedFile empfangen wird, können Sie diese Klasse verwenden, den ursprünglichen Namen der Datei hochgeladen zuzugreifen, Größe, Mimetype usw.

3) das Image-Modell in Ihrer Datenbank (erstellen Sie dies, falls noch nicht geschehen), erstellen Sie einen neuen Datensatz für dieses Image und speichern Sie die oben genannten Felder, falls erforderlich, zusammen mit dem Pfad, in dem Sie das Image speichern möchten. Sie können diesen in der Tabellenzeile gespeicherten Pfad verwenden, um später auf das Bild zuzugreifen.

4) Holen Sie die ID der neu eingefügten Zeile in die Bildtabelle und übergeben Sie sie zurück an das Frontend, wo Sie sie mit dem Ereignishandler "success" für das Dropzone-Plugin erhalten können.

5) Fügen Sie diese neu eingefügte 'ID' als verstecktes Eingabeelement in Ihrem Formular an.

6) Wenn Sie das Formular absenden, erhalten Sie die Bild-IDs, die sich auf Ihren Post beziehen, und Sie können sie mit der Datenbank-Beziehung Ihrer Wahl speichern.

7) Ja, Sie benötigen eine zusätzliche Prüfung für Bilder, die hochgeladen und in Ihre Image-Tabelle eingegeben wurden, aber diejenigen, deren Posts nicht erstellt wurden. Sie können einen Artisan CLI-Befehl für denselben erstellen und ihn als Cron Job zuweisen.

Answer 2

Ich denke, Sie sollten Ihr Formular mit AJAX senden. Diese Lösung war nützlich für mich.

1. Machen Sie eine, Spanne oder ein anderes Element mit Ereignis „Onclick“ statt Taste, weil Taste, um die Form automatisch durch Drücken bestätigen, auch wenn die Art der Schaltfläche kein „Eintragen“ ist.

2. Schreiben Sie eine Ajax-Funktion wie folgt aus:

   function newsFormSubmit(item_id){ 
   
        var formData = new FormData($('.news-form')[0]); 
   
        formData.append("item_id", item_id); 
   
        $.ajax({ 
        type: 'POST', 
        url: config.routes[0].savenews, 
        data: formData, 
        processData: false, 
        contentType: false, 
        success: function (data) { 
         if (data.error) 
         { 
          alert(data.error); 
          return false; 
         } else if (data) 
         { 
          $('#news-card-' + item_id).html(data); 
         } 
        } 
       }); 
   } 
   

3. Platz diese Funktion auf Onclick-Ereignis.