So laden Sie Dateien in vue.js hoch
Vue.js-Methode zum Hochladen von Dateien: Sie können das FormData-Objekt zum Implementieren des Datei-Uploads verwenden. Das FormData-Objekt kann eine Reihe von Schlüssel/Wert-Paaren zum Senden von Anforderungen mithilfe von XMLHttpRequest zusammenstellen. Es kann Formulardaten flexibel und bequem senden.
This Methode ist für alle Marken von Computern geeignet.
Vue.js -Methode zum Hochladen von Dateien: Wie Sie im Screenshot sehen können, müssen das Unternehmen und die Dateien, die hochgeladen werden müssen, zur Verarbeitung an den Hintergrund übermittelt werden. Lassen Sie uns dann darüber sprechen, wie die
vue-Implementierung
vue-Seitencode
<el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :file-list="fileList" :before-upload="beforeUpload"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <a href="./static/moban.xlsx" rel="external nofollow" download="模板"><el-button size="small" type="success">下载模板</el-button></a> <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> --> <div slot="tip" class="el-upload__tip">只能上传excel文件,且不超过5MB</div> <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div> </el-upload> <span slot="footer" class="dialog-footer"> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="submitUpload()">确定</el-button> </span>
Vorherige Größenüberprüfung implementiert wird Hochladen
beforeUpload(file){ debugger console.log(file,'文件'); this.files = file; const extension = file.name.split('.')[1] === 'xls' const extension2 = file.name.split('.')[1] === 'xlsx' const isLt2M = file.size / 1024 / 1024 < 5 if (!extension && !extension2) { this.$message.warning('上传模板只能是 xls、xlsx格式!') return } if (!isLt2M) { this.$message.warning('上传模板大小不能超过 5MB!') return } this.fileName = file.name; return false // 返回false不会自动上传 },
Manuelle Upload-BestätigungsübermittlungsubmitUpload() {
debugger
console.log('上传'+this.files.name)
if(this.fileName == ""){
this.$message.warning('请选择要上传的文件!')
return false
}
let fileFormData = new FormData();
fileFormData.append('file', this.files, this.fileName);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
let requestConfig = {
headers: {
'Content-Type': 'multipart/form-data'
},
}
this.$http.post(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => {
debugger
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
/** * 上传文件 */ @PostMapping("/upload") @RequiresPermissions("basedata:oesmembers:upload") public R upload(@RequestParam("file") MultipartFile file, @RequestParam("companyId") Integer companyId) { System.out.println(companyId); if (file.isEmpty()) { throw new RRException("上传文件不能为空"); } //上传文件 相关逻辑 return R.ok(); }
Javascript
(Video)Das obige ist der detaillierte Inhalt vonSo laden Sie Dateien in vue.js hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wie lade ich Dateien auf 123 Cloud Disk hoch? Sie können Dateien zur Speicherung auf 123 Cloud Disk hochladen, aber die meisten Freunde wissen nicht, wie man Dateien auf 123 Cloud Disk hochlädt. Als nächstes folgt das Bild und der Text zum Hochladen von Dateien auf 123 Cloud Vom Editor mitgebrachtes Tutorial, interessierte Benutzer kommen vorbei und schauen es sich an! So laden Sie Dateien auf 123 Cloud Disk hoch: 1. Öffnen Sie zuerst 123 Cloud Disk und rufen Sie die Hauptseite auf, registrieren Sie sich oder melden Sie sich beim Konto an. 2. Rufen Sie dann die Seite wie unten gezeigt auf und klicken Sie auf die Schaltfläche [Hochladen], die durch den Pfeil angezeigt wird. 3. Dann wird das untere Fenster erweitert. Klicken Sie im Funktionsleistenfenster auf die Funktion [Datei auswählen]. 4. Wählen Sie schließlich die hochzuladende Datei aus und warten Sie geduldig, bis der Upload abgeschlossen ist.

Vorwort: Bei der Entwicklung von vue3 bietet reactive eine Methode zur Implementierung reaktionsfähiger Daten. Dies ist eine häufig verwendete API in der täglichen Entwicklung. In diesem Artikel wird der Autor seinen internen Betriebsmechanismus untersuchen.

vscode selbst unterstützt Vue-Dateikomponenten, um zu Definitionen zu springen, aber die Unterstützung ist sehr schwach. Unter der Konfiguration von vue-cli können wir viele flexible Verwendungen schreiben, die unsere Produktionseffizienz verbessern können. Es sind jedoch diese flexiblen Schreibmethoden, die verhindern, dass die von vscode selbst bereitgestellten Funktionen das Springen zu Dateidefinitionen unterstützen. Um mit diesen flexiblen Schreibmethoden kompatibel zu sein und die Arbeitseffizienz zu verbessern, habe ich ein vscode-Plug-in geschrieben, das Vue-Dateien unterstützt, um zu Definitionen zu springen.

Ace ist ein in JavaScript geschriebener einbettbarer Code-Editor. Es entspricht der Funktionalität und Leistung nativer Editoren wie Sublime, Vim und TextMate. Es kann problemlos in jede Webseite und JavaScript-Anwendung eingebettet werden. Ace wird als Haupteditor für die Cloud9-IDE gepflegt und ist der Nachfolger des Mozilla Skywriter (Bespin)-Projekts.

Vue.js ist heute ein sehr beliebtes Framework in der Front-End-Entwicklung. Da sich Vue.js ständig weiterentwickelt, werden Unit-Tests immer wichtiger. Heute untersuchen wir, wie man Unit-Tests in Vue.js 3 schreibt, und stellen einige Best Practices sowie häufige Probleme und Lösungen vor.

Der Unterschied zwischen Komponentisierung und Modularisierung: Die Modularisierung ist aus Sicht der Codelogik unterteilt. Sie erleichtert die Entwicklung auf Codeebene und stellt sicher, dass die Funktionen jedes Funktionsmoduls konsistent sind. Die Komponentisierung ist die Planung aus der Perspektive der UI-Schnittstelle; die Komponentisierung des Frontends erleichtert die Wiederverwendung von UI-Komponenten.

Wie gehe ich mit Ausnahmen in dynamischen Vue3-Komponenten um? Im folgenden Artikel geht es um die Ausnahmebehandlungsmethoden für dynamische Vue3-Komponenten. Ich hoffe, dass er für alle hilfreich ist.

Wenn wir das Vue-Framework zum Entwickeln von Front-End-Projekten verwenden, stellen wir bei der Bereitstellung mehrere Umgebungen bereit. Oft sind die von Entwicklungs-, Test- und Online-Umgebungen aufgerufenen Schnittstellendomänen unterschiedlich. Wie können wir die Unterscheidung treffen? Dabei werden Umgebungsvariablen und Muster verwendet.
