Beispielcode zur Implementierung einer Upload-Komponente mit Vue3
Allgemeine Entwicklung von Upload-KomponentenBevor wir die Upload-Komponente entwickeln, müssen wir Folgendes verstehen:
Implementieren Sie zunächst einen grundlegenden Upload-Prozess: Grundlegender Upload-Prozess. Klicken Sie auf die Schaltfläche, um den Upload auszuwählen und abzuschließen Der Code lautet wie folgt:
<Vorlage>
<div Klasse="App-Container">
<!--Verwenden Sie das Änderungsereignis-->
<Eingabetyp="Datei" @change="handleFileChange">
</div>
</Vorlage>
<script lang="ts">
importiere { defineComponent } von 'vue'
Axios von „Axios“ importieren
exportiere StandarddefiniereKomponente({
Name: "App",
aufstellen() {
const handleFileChange = (e: Ereignis) => {
// Stellen Sie sicher, dass es sich um ein HTMLInputElement handelt
const target = e.target als HTMLInputElement
const Dateien = Zieldateien
if(Dateien) {
const uploadedFile = Dateien[0]
const formData = new FormData()
formData.append('Datei', hochgeladene Datei)
//Verwenden Sie Node, um die Upload-Schnittstelle zu simulieren axios.post('http://localhost:3001/upload', formData, {
Überschriften: {
"Inhaltstyp": 'multipart/formulardaten'
}
}).dann(bzw=> {
Konsole.log('resp', resp)
}).fangen(Fehler=> {
})
}
}
zurückkehren {
Dateiänderungs-Handle
}
}
})
</Skript>
<Stil>
.Seitentitel {
Farbe: #fff;
}
</Stil>Die Ergebnisse sind wie folgt:
An diesem Punkt wurde unser grundlegender Upload verarbeitet, der relativ einfach ist. Als Nächstes erstellen wir die Datei Uploader.vue, um die Upload-Komponente zu kapseln. Wir müssen die folgenden Funktionen implementieren Benutzerdefinierte VorlagenWir wissen, dass die Verwendung des systemeigenen Stils <input type="file"> hässlich ist, daher müssen wir wie folgt damit umgehen:
Der Code lautet wie folgt:
<Vorlage>
<div Klasse="Datei-Upload">
<div Klasse="Upload-Bereich" @click="triggerUpload"></div>
<span v-if="fileStatus==='loading'">Hochladen</span>
<span v-else-if="fileStatus==='success'">Upload erfolgreich</span>
<span v-else-if="fileStatus==='error'">Hochladen fehlgeschlagen</span>
<span v-else>Zum Hochladen klicken</span>
<input ref="fileInput" type="file" name="file" style="display: none" />
</div>
</Vorlage>
<script lang="ts">
importiere { berechnet, defineComponent, PropType, reaktiv, ref } von 'vue'
Axios von „Axios“ importieren
Typ UploadStatus = ‚bereit‘ | ‚wird geladen‘ | ‚Erfolgreich‘ | ‚Fehler‘
exportiere StandarddefiniereKomponente({
Requisiten: {
Aktion: { // URL-Adresstyp: String,
erforderlich: true
}
},
setup(Requisiten) {
// Eingabeinstanzobjekt, erhalten durch Verknüpfung mit ref="fileInput" const fileInput = ref<null | HTMLInputElement>(null)
const fileStatus = ref<UploadStatus>('bereit')
// 1.div Klickereignis const triggerUpload = () => {
wenn(Dateieingabe.Wert) {
fileInput.value.click()
}
}
//Löse das Eingabeänderungsereignis durch div aus const handleFileChange = (e: Event) => {
const target = e.target als HTMLInputElement
const Dateien = Zieldateien
if(Dateien) {
const uploadedFile = Dateien[0]
const formData = new FormData()
formData.append('Datei', hochgeladene Datei)
readyFile.status = 'loading' // Vor dem Hochladen den Status auf 'loading' setzen
axios.post(props.actions, formData, {
Überschriften: {
"Inhaltstyp": 'multipart/Formulardaten'
}
}).dann(bzw=> {
Konsole.log('resp', resp)
readyFile.status = 'success' // Hochladen erfolgreich und den Status auf Erfolg setzen
}).fangen(Fehler=> {
readyFile.status = 'error' // // Hochladen fehlgeschlagen und der Status wird auf Fehler gesetzt
})
}
}
zurückkehren {
Dateieingabe,
Hochladen auslösen,
handleFileChange,
Dateistatus
}
}
})
</Skript>
Nachdem wir nun die Optimierung des Upload-Komponentenstils und die Verarbeitung des Upload-Status abgeschlossen haben, müssen wir die Datei-Upload-Liste verarbeiten. Liste der unterstützten Datei-UploadsZur Handhabung der Datei-Upload-Liste benötigen wir die folgende Implementierung:
Nehmen Sie basierend auf dem vorherigen Code einige Änderungen vor:
<Vorlage>
<div Klasse="Datei-Upload">
<div Klasse="Upload-Bereich" @click="triggerUpload"></div>
<!-- Zum Hochladen klicken -->
<slot v-if="isUploading" name='wird geladen'>
<button disabled>Hochladen</button>
</slot>
<!-- Hochladen abgeschlossen -->
<slot name="hochgeladen" v-else-if="lastFileData && lastFileData.loaded" :uploadData="lastFileData.data">
<button disabled>Zum Hochladen klicken</button>
</slot>
<!-- Standardzustand -->
<slot v-else name='Standard'>
<!-- <button disabled>Zum Hochladen klicken</button> -->
<span>Zum Hochladen klicken</span>
</slot>
<input ref="fileInput" type="file" name="file" style="display: none" />
<!--Dateiliste anzeigen-->
<ul>
<li
v-for="Datei in Dateiliste"
:Schlüssel="Datei.uid"
:class="`hochgeladene Datei upload-${file.status}`"
>
<span class="Dateiname">
{{ Dateiname }}
</span>
<button class="delete-icon" @click="reomveFile(file.uid)">Entf</button>
</li>
</ul>
</div>
</Vorlage>
<script lang="ts">
importiere { last } von 'lodash-es'
importiere { v4 als uuidv4 } von 'uuid';
// Upload-Statustyp definieren UploadStatus = „bereit“ | „wird geladen“ | „erfolgreich“ | „Fehler“
// Schritt 1: Definieren Sie die Schnittstelle des Upload-Dateiobjekts. Klasse: Exportschnittstelle UploadFile {
uid: string; // eindeutige ID der Datei
Größe: Zahl; // DateigrößeName: Zeichenfolge; // DateinameStatus: UploadStatus; // Upload-StatusRaw: Datei; // DateiFortschritt?: Zeichenfolge; // Datei-Upload-FortschrittResp?: beliebig; // Server gibt Daten zurückURL?: Zeichenfolge // entsprechende Anzeige-URL
}
exportiere StandarddefiniereKomponente({
Requisiten: {
Aktion: { // URL-Adresstyp: String,
erforderlich: true
}
},
setup(Requisiten) {
// Eingabeinstanzobjekt, erhalten durch Verknüpfung mit ref="fileInput" const fileInput = ref<null | HTMLInputElement>(null)
// Schritt 2: Dateiliste hochladen const filesList = ref<UploadFile[]>([])
// Schritt 4-1 Bestimmen Sie, ob der Upload läuft const isUploading = computed(()=> {
returniere filesList.value.some((file)=>file.status==='loading')
})
//Schritt 4-2 Holen Sie sich das letzte Element der hochgeladenen Datei const lastFileData = computed(()=>{
const letzteDatei = letzte(DateienListe.Wert)
if(!letzteDatei) return false
zurückkehren {
geladen: letzteDatei?.status === 'erfolgreich',
Daten:letzteDatei?.resp
}
})
// 1.div Klickereignis const triggerUpload = () => {
wenn(Dateieingabe.Wert) {
fileInput.value.click()
}
}
//Löse das Eingabeänderungsereignis durch div aus const handleFileChange = (e: Event) => {
const target = e.target als HTMLInputElement
const Dateien = Zieldateien
if(Dateien) {
const uploadedFile = Dateien[0]
const formData = new FormData()
formData.append('Datei', hochgeladene Datei)
// Schritt 3 Richten Sie ein responsives Objekt ein und speichern Sie es in der Dateiliste zur Anzeige auf der Seite const fileObj = reactive<UploadFile>({
uid: uuid(); // eindeutige ID der Datei
Größe: hochgeladeneDatei.Größe,
Name: hochgeladeneDatei.name,
Status: „wird geladen“,
raw: hochgeladene Datei
})
DateienListe.Wert.Push(Dateiobjekt)
axios.post(props.actions, formData, {
Überschriften: {
"Inhaltstyp": 'multipart/formulardaten'
},
//Schritt 6: Upload-Fortschritt verarbeiten onUploadProgress: (progressEvent)=> {
const komplett = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
fileObj.progress = abgeschlossen
}
}).dann(bzw=> {
Konsole.log('resp', resp)
fileObj.status = "Erfolg"
}).fangen(Fehler=> {
fileObj.status = "Fehler"
}).schließlich(()=> {
// Ein Fehler, der das erneute Hochladen eines Bildes verhindert
wenn(Dateieingabe.Wert) {
fileInput.value.value = ''
}
})
}
}
// Schritt 7: Löschvorgang const reomveFile = (uid: string) => {
filesList.value = filesList.value.filter(Datei=>Datei.uid!==uid)
}
zurückkehren {
Dateieingabe,
Hochladen auslösen,
handleFileChange,
Dateistatus,
wird hochgeladen,
Dateiliste,
letzteDateidaten
}
}
})
</Skript>
Hinweis: Wenn Sie dasselbe Bild auswählen, wird der Upload nicht durchgeführt. Da wir das Eingabeänderungsereignis verwenden, müssen wir den Eingabewert nach dem Hochladen auf Null setzen. Unterstützt eine Reihe von Lebenszyklus-Hook-Ereignissen, Upload-Ereignissen vor dem Hochladen
<Vorlage>
...
</Vorlage>
<script lang="ts">
importiere { last } von 'lodash-es'
importiere { v4 als uuidv4 } von 'uuid';
// Upload-Statustyp definieren UploadStatus = „bereit“ | „wird geladen“ | „erfolgreich“ | „Fehler“
// Definieren Sie die hochgeladene Datei als Boolean oder Promise und akzeptieren Sie eine Datei
Typ CheckUpload = ()=> Boolean | Promise<Datei>
Exportschnittstelle UploadFile {
...
}
exportiere StandarddefiniereKomponente({
Requisiten: {
Aktion: { // URL-Adresstyp: String,
erforderlich: true
},
vor dem Hochladen: {
Typ: Funktion als PropType<CheckUpload>
}
},
setup(Requisiten) {
const fileInput = ref<null | HTMLInputElement>(null)
const filesList = ref<UploadFile[]>([])
// Schritt 4-1 Bestimmen Sie, ob der Upload läuft const isUploading = computed(()=> {
returniere filesList.value.some((file)=>file.status==='loading')
})
const lastFileData = berechnet(()=>{
const letzteDatei = letzte(DateienListe.Wert)
if(!letzteDatei) return false
zurückkehren {
geladen: letzteDatei?.status === 'erfolgreich',
Daten:letzteDatei?.resp
}
})
const triggerUpload = () => {
wenn(Dateieingabe.Wert) {
fileInput.value.click()
}
}
const handleFileChange = (e: Ereignis) => {
const target = e.target als HTMLInputElement
const Dateien = Zieldateien
const uploadedFile = Dateien[0]
wenn(props.beforeUpload) {
const Ergebnis = props.beforeUpload(hochgeladene Datei)
if (Ergebnis && Ergebnisinstanz von Promise) {
Ergebnis.dann((Prozessdatei)=> {
if (hochgeladeneDateiinstanz der Datei) {
postFile(hochgeladeneDatei)
}
}).fangen(Fehler=>{
Konsole.Fehler(Fehler)
})
} esle wenn(Ergebnis===true) {
postFile(hochgeladeneDatei)
}
}anders{
postFile(hochgeladeneDatei)
}
}
const reomveFile = (uid: Zeichenfolge) => {
filesList.value = filesList.value.filter(Datei=>Datei.uid!==uid)
}
// Datei-Upload verarbeiten const postFile = (readyFile:UploadFile)=> {
const formData = new FormData()
formData.append('Datei', readyFile.raw)
readyFile.status = "wird geladen"
axios.post(Eigenschaften.Aktion, FormData, {
Überschriften: {
"Inhaltstyp": 'multipart/Formulardaten'
},
beiUploadProgress: (progressEvent) => {
const komplett = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
// console.log('hochladen' + abschließen)
readyFile.progress = abgeschlossen
}
}, ).dann(bzw.=> {
Konsole.log('resp', resp)
// fileStatus.value = "Erfolg"
readyFile.status = "Erfolgreich"
readyFile.resp = resp.data
}).fangen(Fehler=> {
// fileStatus.value = "Fehler"
readyFile.status = "Fehler"
})
.schließlich(()=> {
// Ein Fehler, der das erneute Hochladen eines Bildes verhindert
wenn(Dateieingabe.Wert) {
fileInput.value.value = ''
}
})
}
zurückkehren {
Dateieingabe,
Hochladen auslösen,
handleFileChange,
Dateistatus,
wird hochgeladen,
Dateiliste,
letzteDateiDaten
}
}
})
</Skript>
Implementierungsschritte:
onProgress, onSuccess, onError und onChange sind ähnlich Drag & Drop-UnterstützungDer allgemeine Ablauf ist wie folgt:
Bitte beachten Sie, dass die Verwendung von v-on in der offiziellen Vue-Dokumentation zu finden ist. Oben genannter Code:
<Vorlage>
<div Klasse="Datei-Upload">
<div
:Klasse="['Upload-Bereich', Drag && isDragOver ? 'is-dragover': '' ]"
v-on="Ereignisse"
>
<!-- Zum Hochladen klicken -->
<slot v-if="isUploading" name='wird geladen'>
<button disabled>Hochladen</button>
</slot>
<!-- Hochladen abgeschlossen -->
<slot name="hochgeladen" v-else-if="lastFileData && lastFileData.loaded" :uploadData="lastFileData.data">
<button disabled>Zum Hochladen klicken</button>
</slot>
<!-- Standardzustand -->
<slot v-else name='Standard'>
<!-- <button disabled>Zum Hochladen klicken</button> -->
<span>Zum Hochladen klicken</span>
</slot>
</div>
<input ref="fileInput" type="file" name="file" style="display: none" @change="handleFileChange" />
<ul>
<li
v-for="Datei in Dateiliste"
:Schlüssel="Datei.uid"
:class="`hochgeladene Datei upload-${file.status}`"
>
<Bild
v-if="datei.url && listType === 'bild'"
Klasse = "Upload-Liste-Thumbnail"
:src="datei.url"
:alt="datei.name"
>
<span class="filname">
{{ Dateiname }}
</span>
<span class="Fortschritt">
{{ Datei.Fortschritt }}
</span>
<button class="delete-icon" @click="reomveFile(file.uid)">Entf</button>
</li>
</ul>
</div>
</Vorlage>
<script lang="ts">
importiere { berechnet, defineComponent, PropType, reaktiv, ref } von 'vue'
Axios von „Axios“ importieren
importiere { v4 als uuidv4 } von 'uuid';
importiere { last } von 'lodash-es'
Typ UploadStatus = ‚bereit‘ | ‚wird geladen‘ | ‚Erfolgreich‘ | ‚Fehler‘
Typ fileListType = 'Text' | 'Bild'
Typ CheckUpload = ()=> Boolean | Promise<Datei>
Exportschnittstelle UploadFile {
uid: string; // eindeutige ID der Datei
Größe: Zahl; // DateigrößeName: Zeichenfolge; // DateinameStatus: UploadStatus; // Upload-StatusRaw: Datei; // Dateifortschritt?: Zeichenfolge;
resp?: any; // Vom Server zurückgegebene Daten url?: string // Entsprechende angezeigte URL
}
// dragOver wird ausgelöst wenn die Datei in den Bereich gezogen wird // dragLeave wird ausgelöst wenn die Datei den Drag-Bereich verlässt // Drop-Event holt die gezogene Datei, löscht die Klasse und löst Upload aus // funktioniert nur wenn Drag eingestellt ist export default defineComponent({
Name: 'Uploader',
Requisiten: {
Aktion: { // URL-Adresstyp: String,
erforderlich: true
},
beofreUpload:{ // Verarbeitung vor dem Hochladen Typ: Funktion als PropType<CheckUpload>
},
drag: { // Ob gezogen werden soll Typ: Boolean,
Standard: false
},
autoUpload: { // Automatischer Upload-Typ: Boolean,
Standard: true
},
Listentyp: {
Typ: String als PropType<fileListType>,
Standard: „Text“
}
},
setup(Requisiten) {
const fileInput = ref<null | HTMLInputElement>(null)
const fileStatus = ref<UploadStatus>('bereit')
//Hochgeladene Dateien speichern const filesList = ref<UploadFile[]>([])
// Definiert ein isDragOver-Flag, um die gezogene Anzeige des Stils zu handhaben. Upload-Bereichs const isDragOver = ref<boolean>(false)
const triggerUpload = () => {
wenn(Dateieingabe.Wert) {
fileInput.value.click()
}
}
let-Ereignisse: {[Schlüssel:Zeichenfolge]: (e: beliebig)=>void} = {
'Klick': Hochladen auslösen,
}
// Solange sich eine Datei im Ladezustand befindet, bedeutet dies, dass sie hochgeladen wird const isUploading = computed(()=>{
returniere filesList.value.some((Datei)=> Datei.status==='wird geladen')
})
// Das letzte Element der hochgeladenen Datei abrufen const lastFileData = computed(()=>{
const lastFile = letzte(Dateienliste.Wert)
if(!letzteDatei) return false
zurückkehren {
geladen: letzteDatei?.status === 'erfolgreich',
Daten:letzteDatei?.resp
}
})
// Dragover und Dragleave verarbeiten
const handleDrag = (e: DragEvent, over: boolean) => {
// Verhindern des Standardereignisses e.preventDefault()
// dragover ist wahr, dragleave ist falsch
isDragOver.value = über
}
// Griff fallen lassen
const handleDrop = (e: DragEvent) => {
e.preventDefault()
isDragOver.value = false
wenn(e.dataTransfer) {
vorUploadCheck(e.dataTransfer.files)
}
}
wenn (Eigenschaften.ziehen) {
Ereignisse = {
...Veranstaltungen,
'dragover': (e: DragEvent) => { handleDrag(e, true)},
'dragleave': (e: DragEvent) => { handleDrag(e, false)},
'drop': GriffDrop
}
// console.log(Ereignisse)
}
// Datei löschen const reomveFile = (uid: string)=> {
filesList.value = filesList.value.filter(Datei=>Datei.uid!==uid)
}
const postFile = (readyFile:UploadFile) => {
const formData = new FormData()
formData.append('Datei', readyFile.raw)
readyFile.status = "wird geladen"
// Nachdem Sie die Datei ausgewählt haben, übertragen Sie sie in das Speicherobjekt axios.post(props.action, formData, {
Überschriften: {
"Inhaltstyp": 'multipart/formulardaten'
},
beiUploadProgress: (progressEvent) => {
const komplett = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
// console.log('Hochladen' + Abschließen)
readyFile.progress = abgeschlossen
}
}, ).dann(bzw.=> {
Konsole.log('resp', resp)
// fileStatus.value = "Erfolg"
readyFile.status = "Erfolgreich"
readyFile.resp = resp.data
}).fangen(Fehler=> {
// fileStatus.value = "Fehler"
readyFile.status = "Fehler"
})
.schließlich(()=> {
// Ein Fehler, der das erneute Hochladen eines Bildes verhindert
wenn(Dateieingabe.Wert) {
fileInput.value.value = ''
}
})
}
const addFileToList = (hochgeladeneDatei: Datei) => {
const fileObj = reaktiv<Upload-Datei>({
Benutzerkennung: uuidv4(),
Größe: hochgeladeneDatei.Größe,
Name: hochgeladeneDatei.name,
Status: 'bereit',
raw: hochgeladene Datei
})
// Bildformat verarbeiten und anzeigen if(props.listType==='picture') {
// versuchen {
// fileObj.url = URL.createObjectURL(hochgeladeneDatei)
// }fang(fehler) {
// console.error('Datei hochladen, Fehler', Fehler)
// }
const fileReader = neuer FileReader()
fileReader.readAsDataURL(hochgeladeneDatei)
fileReader.addEventListener('laden', ()=> {
fileObj.url = fileReader.result als Zeichenfolge
})
}
DateienListe.Wert.Push(Dateiobjekt)
wenn(props.autoUpload) {
postFile(Dateiobjekt)
}
}
const uploadFiles = ()=> {
// filesList.value.filter(Datei => Datei.status === 'bereit').fürJedes(readyFile => postFile(readyFile))
filesList.value.filter(Datei => Datei.Status === 'bereit').fürJedes(readyFile=>postFile(readyFile))
}
const beforeUploadCheck = (Dateien: null | FileList ) => {
if(Dateien) {
fileStatus.value = "wird geladen"
const uploadedFile = Dateien[0]
wenn(props.beofreUpload) {
const Ergebnis = props.beofreUpload()
// Wenn ein Rückgabewert vorhanden ist if(result && result instanceof Promise) {
Ergebnis.dann(verarbeiteteDatei=> {
if (verarbeiteteDateiinstanz der Datei) {
addFileToList(verarbeiteteDatei)
} anders {
neuen Fehler werfen (,,beforeUpload-Versprechen sollte Dateiobjekt zurückgeben‘)
}
}).catch(err=> {
console.log(fehler)
})
} sonst wenn(Ergebnis === wahr) {
addFileToList(hochgeladeneDatei)
}
} anders {
addFileToList(hochgeladeneDatei)
}
}
}
const handleFileChange = (e: Ereignis) => {
const target = e.target als HTMLInputElement
const Dateien = Zieldateien
beforeUploadCheck(Dateien)
}
zurückkehren {
Dateieingabe,
Hochladen auslösen,
handleFileChange,
wird hochgeladen,
Dateiliste,
Datei entfernen,
letzteDateidaten,
vorUploadCheck,
istDragOver,
Veranstaltungen
}
}
})
</Skript>
Oben ist die grundlegende Upload-Komponente auf Basis von vue3. Der Upload-Schnittstellencode ist ebenfalls beigefügt:
// Modul importieren const Koa = require('koa');
const fs = erfordern('fs');
const path = require('Pfad');
const router = erfordern('koa-router')();
const koaBody = erfordern('koa-body');
const static = erforderlich('koa-static');
const cors = erfordern('koa2-cors')
// Instanziierung const app = new Koa();
app.verwenden(koaBody({
multipart: true, // Unterstützt das Hochladen von Dateien formidable: {
maxFieldsSize: 2 * 1024 * 1024, // Maximale Dateigröße ist 2 MB multipart: true // Ob multipart-formdate-Formulare unterstützt werden sollen}
}));
const uploadUrl = "http://localhost:3001/static/upload";
// Routing konfigurieren router.get('/', (ctx) => {
// Header-Typ festlegen. Wenn nicht festgelegt, wird die Seite direkt heruntergeladen ctx.type = 'html';
// Datei lesen const pathUrl = path.join(__dirname, '/static/upload.html');
ctx.body = fs.createReadStream(Pfad-Url);
});
// Dateien hochladen router.post('/upload', (ctx) => {
// Hochgeladene Datei abrufen const file = ctx.request.files.file;
console.log(Datei);
// Dateistream lesen const fileReader = fs.createReadStream(file.path);
// Speicherpfad für die Datei festlegen const filePath = path.join(__dirname, '/static/upload/');
// Zu absolutem Pfad zusammenstellen const fileResource = filePath + `/${file.name}`;
/**
* Verwenden Sie createWriteStream, um Daten zu schreiben, und verwenden Sie dann Pipe Stream Splicing*/
const writeStream = fs.createWriteStream(fileResource);
// Prüfen Sie, ob der Ordner /static/upload existiert. Wenn nicht, erstellen Sie einen. if (!fs.existsSync(filePath)) {
fs.mkdir(Dateipfad, (err) => {
wenn (Fehler) {
wirf einen neuen Fehler (err);
} anders {
: fileReader.pipe(writeStream);
ctx.body = {
URL: Upload-URL + `/${file.name}`,
Code: 0,
Meldung: „Upload erfolgreich 1“
};
}
});
} anders {
: fileReader.pipe(writeStream);
ctx.body = {
URL: Upload-URL + `/${file.name}`,
Code: 0,
Meldung: „Upload erfolgreich 1“
};
}
});
//Statischen Ressourcenpfad konfigurieren app.use(static(path.join(__dirname)));
// Domänenübergreifende Anwendung „app.use(cors())“ aktivieren
// Routing starten app.use(router.routes()).use(router.allowedMethods());
// Abhörportnummer app.listen(3001, () => {
console.log('Server lauscht in 3001');
});
Abschließende GedankenDas Obige ist nur eine einfache Implementierung. Natürlich können wir auch benutzerdefinierte Header, benutzerdefinierte Daten, Zugriff usw. hinzufügen. Damit ist dieser Artikel über die Verwendung von Vue3 zur Implementierung eines Beispielcodes für eine Upload-Komponente abgeschlossen. Weitere verwandte Inhalte zur Vue3-Upload-Komponente finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Mac VMware Fusion CentOS7 Konfiguration statisches IP-Tutorial-Diagramm
>>: Test und Lösung für den großen Speicherverbrauch und die hohe CPU-Auslastung von MySQL
Artikel empfehlen
$nextTick-Erklärung, die Sie auf einen Blick verstehen
Inhaltsverzeichnis 1. Funktionsbeschreibung 2. Üb...
Docker-Grundlagen
Vorwort: Docker ist eine Open-Source-Anwendungsco...
Tipps zum MySQL-Abfragecache
Inhaltsverzeichnis Vorwort Einführung in QueryCac...
So verwenden Sie benutzerdefinierte Bilder in HTML zum Anzeigen von Kontrollkästchen
Wenn Sie zur Implementierung eines Kontrollkästch...
MYSQL Performance Analyzer EXPLAIN Anwendungsbeispielanalyse
Dieser Artikel veranschaulicht anhand eines Beisp...
Verwendung und Unterschied von Vue.set() und this.$set()
Wenn wir Vue zur Entwicklung verwenden, kann eine...
Dieser Artikel entführt Sie in die Welt der js-Datentypen und Datenstrukturen
Inhaltsverzeichnis 1. Was ist dynamische Typisier...
MySQL-Datenbank zum Abrufen der Angaben zu Sekunden, Minuten, Stunden und Tagen vor und nach
Aktuelle Uhrzeit abrufen: Wählen Sie aktuellen Ze...
Nach dem Neustart des Baota-Panels wird die Meldung -ModuleNotFoundError: Kein Modul mit dem Namen „geventwebsocket“ angezeigt.
Hintergrund: Da der Server das Flask-Projekt bere...
Zwei Methoden zur Implementierung der Mysql-Remoteverbindungskonfiguration
Zwei Methoden zur Implementierung der Mysql-Remot...
Implementierung eines Puzzlespiels mit js
In diesem Artikel wird der spezifische Code von j...
Installations-Tutorial für die ZIP-Archivversion von MySQL 5.7
In diesem Artikel finden Sie das Installations-Tu...
Alibaba Cloud Server Ubuntu Konfigurations-Tutorial
Da für den Import benutzerdefinierter Ubuntu-Imag...
Die vue-cli-Konfiguration verwendet den vollständigen Prozessdatensatz von Vuex
Inhaltsverzeichnis Vorwort Installation und Verwe...
Zusammenfassung des JS-Ausführungskontexts und -umfangs
Inhaltsverzeichnis Vorwort Text 1. Konzepte im Zu...