Vue implementiert Upload-Komponente

<Formular 
  Methode="posten" 
  enctype="multipart/aus-daten"
  Aktion="API/Hochladen"
>
  <input type="Dateiname="Datei">
  <button type="submit">Senden</button>
</form>

var formdata = new FormData(); // Ein FormData-Objekt erstellen formdata.append("name","laotie"); // Neue Attributwerte über die Methode append() hinzufügen... // Für weitere Methoden klicken Sie bitte auf den Link unten

<input type="Datei" name="Datei" @change.prevent="handleFileChange">
// Erstellen Sie eine Eingabe vom Typ „Datei“, um den Dateiupload auszulösen. Sie können die Eingabe später ausblenden und den Stil anpassen. // Wenn Sie den Stil anpassen, können Sie mithilfe von „slot“ die Stile verschiedener Upload-Zustände (Laden, Erfolg, Standard) unterscheiden.

const handleFileChange = (e:Ereignis)=>{
  const target = e.target als HTMLInputElement
  const files = Array.from（target.files）// Beachten Sie, dass hier ein Klassenarray erhalten wird if(files){
    // Datei abrufen const uploadedFile = files[0]
    
    if(!validateFormat) return
    // … Dies ist nur eine Denkweise und die spezifische Überprüfung wird hier nicht beschrieben. // Führen Sie vor dem Hochladen der Datei einige Überprüfungen durch, z. B. Dateiformat, Größe usw.
    // Wenn die Anforderungen nicht erfüllt sind, werden keine weiteren Anfragen gesendet const formData = new FormData()
    formData.append(hochgeladeneDatei.name,hochgeladeneDatei)
    
    axios.post('/hochladen',formData,{
      Überschriften:{
         // Hinweis zum Festlegen des Kodierungstyps „Content-Type“: „multipart/form-data“
      }
    }).dann(res=>{
      console.log('Hochladen erfolgreich')
    }).fangen(Fehler =>{
      // Dateiupload fehlgeschlagen}).finally(()=>{
      // Dateiupload abgeschlossen, egal ob erfolgreich oder fehlgeschlagen // Hier kannst du input.value löschen
    })
  }
}

// Hochladen.vue
<Vorlage>
  <div Klasse="Upload-Container">
    <div Klasse="upload-box" @click.prevent="triggerUpload" v-bind="$attrs">
      <slot name="wird geladen" v-if="fileStatus==='wird geladen'">
        <button class="btn btn-primary">Hochladen</button>
      </slot>
      <slot name="hochgeladen" v-else-if="fileStatus==='success'" :uploadedData="fileData">
        <button class="btn btn-primary">Hochladen erfolgreich</button>
      </slot>
      <slot v-else name="default">
        <button class="btn btn-primary">Zum Hochladen klicken</button>
      </slot>
    </div>
    <input Typ="Datei" Klasse="file-input d-none" Name="Datei" ref="uploadInput" @change="hanldeInput"/>
  </div>
</Vorlage>
<script lang="ts">
importiere { defineComponent, ref, PropType, watch } von 'vue'
Axios von „Axios“ importieren
Typ UploadStatus = ‚bereit‘ | ‚wird geladen‘ | ‚Erfolgreich‘ | ‚Fehler‘
Typ FunctionProps = (Datei:Datei) => Boolesch
exportiere StandarddefiniereKomponente({
  Name: 'Hochladen',
  inheritAttrs: false,
  Requisiten: {
    // URL hochladen
    Aktion: {
      Typ: Zeichenfolge,
      erforderlich: true
    },
    // Überprüfung vor dem Hochladen, eine Funktion die einen Booleschen Wert zurückgibt beforeUpload: {
      Typ: Funktion als PropType<FunctionProps>
    },
    // Hochgeladene Daten, die verwendet werden, um den Status zu bestimmen oder die Anzeige zu initialisieren uploadedData: {
      Typ: Objekt
    }
  },
  gibt aus: ['Datei-Upload erfolgreich', 'Datei-Upload-Fehler'],
  setup(Eigenschaften, ctx) {
    const uploadInput = ref<null | HTMLInputElement>(null)
    const fileStatus = ref<UploadStatus>(props.uploadedData ? 'Erfolg' : 'Bereit')
    const fileData = ref(props.uploadedData)
    beobachten(() => Eigenschaften.uploadedData, (Wert) => {
      wenn (Wert) {
        fileStatus.value = "Erfolg"
        fileData.value = val
      }
    })
    const triggerUpload = () => {
      wenn (uploadInput.value) {
        uploadInput.value.click()
      }
    }
    const hanldeInput = (e:Ereignis) => {
      const target = e.target als HTMLInputElement
      const Dateien = Zieldateien
      console.log(Ziel)
      if (Dateien) {
        const uploadFile = Array.from(Dateien)
        const validateFormat = props.beforeUpload ? props.beforeUpload(uploadFile[0]) : true
        if (!validateFormat) return
        fileStatus.value = "wird geladen"
        const formData = new FormData()
        formData.append('Datei', Upload-Datei[0])
        axios.post(Eigenschaften.Aktion, FormData, {
          Überschriften: {
            „Inhaltstyp“: „multipart/Formulardaten“
          }
        }).dann(res => {
          console.log('Datei erfolgreich hochgeladen', res)
          fileStatus.value = "Erfolg"
          Dateidatenwert = res.data
          ctx.emit('Datei erfolgreich hochgeladen', res.data)
        }).fangen(Fehler => {
          console.log('Dateiupload fehlgeschlagen', Fehler)
          fileStatus.value = "Fehler"
          ctx.emit('Datei-Upload-Fehler', Fehler)
        }).schließlich(() => {
          console.log('Dateiupload abgeschlossen')
          wenn (uploadInput.value) {
            uploadInput.Wert.Wert = ''
          }
        })
      }
    }

    zurückkehren {
      hochladenInput,
      Hochladen auslösen,
      griffInput,
      Dateistatus,
      DateiDaten
    }
  }
})
</Skript>

<Vorlage>
  <div Klasse="Beitragsseite erstellen">
    <hochladen
      Aktion="/Hochladen"
      :beforeUpload="vor dem Hochladen"
      :uploadedData="hochgeladeneDaten"
      @file-uploaded-success="erfolgreich hochgeladen"
      Klasse = "d-flex align-items-center justify-content-center bg-light text-secondary w-100 my-4"
      >
      <Vorlage #uploaded="slotProps">
        <div Klasse="Hochgeladener Bereich">
          <img :src="slotProps.uploadedData.data.url"/>
          <h3>Klicken Sie hier, um es erneut hochzuladen</h3>
        </div>
       </Vorlage>
       <Vorlage #Standard>
         <h2>Klicken Sie hier, um das Kopfzeilenbild hochzuladen</h2>
       </Vorlage>
       <Vorlage #wird geladen>
         <div Klasse="d-flex">
          <div Klasse="spinner-border text-secondary" Rolle="status">
            <span class="sr-only"></span>
          </div>
         </div>
       </Vorlage>
    </hochladen>
  </div>
</Vorlage>
<script lang="ts">
importiere { defineComponent, ref, onMounted } von 'vue'
Upload von „../components/Upload.vue“ importieren
importiere createMessage aus '../components/createMessage'

exportiere StandarddefiniereKomponente({
  Name: 'CreatePost',
  Komponenten: {Hochladen},
  aufstellen() {
    const uploadedData = ref() //Erstellen Sie reaktionsfähige Daten let imageId = ''
    beimMounted(() => {
      ....
      // Die Logik wird hier weggelassen, holen Sie sich das Initialisierungsdatenbild
      wenn (Bild) {
        uploadedData.value = { Daten: Bild }
      }
    })
    // Vor dem Hochladen prüfen, Booleschen Wert zurückgeben const beforeUpload = (file:File) => {
      const res = vorUploadCheck(Datei, {
        Format: ['Bild/JPEG', 'Bild/PNG'],
        Größe: 1
      })
      const { Fehler, bestanden } = res
      wenn (Fehler === 'Format') {
        createMessage('Hochgeladene Bilder können nur im JPG/PNG-Format sein!', 'error')
      }
      if (Fehler === 'Größe') {
        createMessage('Die Größe des hochgeladenen Bildes darf 1 MB nicht überschreiten', 'Fehler')
      }
      Rückkehr bestanden
    }
    // Nachdem der Upload erfolgreich war, können Sie die ImageId für die nachfolgende Verarbeitung abrufen, z. B. zum Erstellen eines Formulars. const hanldeUploadSuccess = (res:ResponseProps<ImageProps>) => {
      createMessage(`Bild-ID ${res.data._id} hochladen`, 'erfolgreich')
      wenn (res.data._id) {
        Bild-ID = res.data._id
      }
    }
    zurückkehren {
      vor dem Hochladen,
      hanldeUploadErfolgreich,
      hochgeladeneDaten
    }
  }
})
</Skript>
<Stil>
.Beitragsseite erstellen{
  Polsterung: 0 20px 20px;
}
.Erstellen einer Beitragsseite .Upload-Box{
  Höhe: 200px;
  Cursor: Zeiger;
  Überlauf: versteckt;
}
.erstellen-post-page .upload-box img{
  Breite: 100 %;
  Höhe: 100%;
  Objekt-Passung: Abdeckung;
}
.hochgeladener Bereich{
  Position: relativ;
}
.hochgeladener Bereich:hover h3{
  Anzeige: Block;
}
.hochgeladener Bereich h3{
  Anzeige: keine;
  Position: absolut;
  Farbe: #999;
  Textausrichtung: zentriert;
  Breite: 100 %;
  oben: 50 %
}
</Stil>