So handhaben Sie Bilder in Vue-Formularen

<Vorlage>
 <div Klasse="Container">
  <div id="nav">
   <Administratornavigation/>
  </div>
  <div id="erstellen">
   <h1>Neuen Beitrag erstellen</h1>
  </div>
  <div id="Beitrag">
   <Text>
    <form>
     <label for="title">Titel: </label>
     <textarea v-model=formdata.title Zeilen="5" Spalten="60" Name="Titel"
      Platzhalter="Text eingeben">
     </textarea>
     <br/>
     <label for="body">Textkörper: </label>
     <textarea v-model=formdata.body Zeilen="5" Spalten="60" Name="body"
      Platzhalter="Text eingeben">
     </textarea>
     <br/>
     <label for="description">Beschreibung: </label>
     <textarea v-model=formdata.description Zeilen="5" Spalten="60" Name="Beschreibung"
      Platzhalter="Text eingeben">
     </textarea>
     <br/>
     <label for="snippet">Ausschnitt: </label>
     <textarea v-model=formdata.snippet Zeilen="5" Spalten="60" Name="snippet"
      Platzhalter="Text eingeben">
     </textarea>
     <br/>
     <label for="file">Foto hochladen: </label>
     <Eingabe
      Klasse="Formular-Steuerdatei"
      Typ="Datei"
      akzeptieren="image/*"
      v-bind="formdata.photo"
     />
     <br/>
     <input id="senden" type="senden" value="senden" @click.prevent="createPost()"/>
    </form>
   </body>
  </div>
 </div>
</Vorlage>

<Skript>
importiere Adminnav aus „../components/adminnav.vue“;
importiere PostService aus „../service/PostService“;

Standard exportieren {
 Name: "createStory",
 Komponenten:
  Administratornavigation,
 },
 Daten() {
  zurückkehren {
   Formdaten: {
    Titel: '',
    Körper: '',
    Beschreibung: '',
    Ausschnitt: '',
    Foto: null,
   },
  };
 },
 Methoden: {
  Beitrag erstellen() {
   Konsole.log(diese.Formdaten);
   /* eslint bevorzugt Destrukturierung: 0 */
   const formdata = diese.formdata;
   PostService.createPost(Formulardaten)
    .then(() => {
     console.log('Erfolg');
    });
  },
 },
};
</Skript>

router.post("/add-story", upload.single('Foto'), async(req, res) => {
 versuchen{
  let post = neuer Beitrag();
  Beitragstitel = erforderlicher Textkörpertitel;
  Beitragsbeschreibung = erforderliche Textkörperbeschreibung;
  post.photo = erforderlicher.Dateispeicherort;
  post.body = erforderlich.body.body;
  Beitrag.Snippet = erforderlich.Body.Snippet;

  warte auf post.save();

  res.json({
   Status: wahr,
   Meldung: „Erfolgreich gespeichert.“
  });

 } Fang(Fehler) {
  res.status(500).json({
   Erfolg: falsch,
   Nachricht: Fehlernachricht
  });
 }
});

<Eingabetyp="Datei" akzeptieren="Bild/*" Klasse="Formular-Steuerungsdatei"
  @change="updatePhoto($event.target.name, $event.target.files)"
>

// Der Rest der Vue-Komponente data () {
  zurückkehren {
    Titel: '',
    Körper: '',
    Beschreibung: '',
    Ausschnitt: '',
    Foto: {} //Dateidaten speichern};
},
Methoden: {
  updatePhoto (Dateien) {
    wenn (!Dateien.Länge) return;

    //Dateidaten speichern this.photo = {
      Name: Dateien[0].Name,
      Daten: Dateien[0]
    };
  },
  Beitrag erstellen() {
    let formData = neue FormData();

    formData.append('Titel', dieser.Titel);
    formData.append('body', dieser.body);
    formData.append('Beschreibung', diese.Beschreibung);
    formData.append('snippet', dieses.snippet);
    formData.append('Foto', dieses.Foto.Daten, dieser.Foto.Name);

    PostService.createPost(Formulardaten)
    .then(() => {
      console.log('Erfolg');
    });
  }
}
// Der Rest der Vue-Komponente