Vue-Formular-Post-Anforderung kombiniert mit Servlet zur Realisierung der Datei-Upload-Funktion

Vue-Formular-Post-Anforderung kombiniert mit Servlet zur Realisierung der Datei-Upload-Funktion

Code der Front-End-Testseite:

<Vorlage>
 <div>
  <input type="file" name="file" @change="change($event)">
 </div>
</Vorlage>
<Skript>
 Standard exportieren {
  erstellt(){
   dieser.Pfad = diese.$route.query;
   für (lass i in diesem.Pfad) {
    dies[i] = decodeURIComponent(dieser.Pfad[i]);
   }
  },
  Methoden:{
   ändern(ev){
    let Datei = ev.target.files[0];
    let size = Dateigröße;
    let name = Dateiname;
    wenn(Größe > 314572800){
     this.$message.warning('Hochgeladene Dateien dürfen nicht größer als 300 MB sein');
     zurückkehren;
    }
    let formData = neue FormData();
    formData.append('Datei',Datei,Name)
    dies.$axios.post('/JT3'+this.getddRecordDelete,formData,{
     Überschriften: {"Inhaltstyp":"multipart/form-data"}
    }).dann(Daten=>{
     konsole.log(Daten);
    })
   }
  }
 }
</Skript>
<Stilbereich>
</Stil>

Backend-Servlet, das Code empfängt

Paket jt3.control.zygkh;
importiere java.io.File;
importiere java.io.FileOutputStream;
importiere java.io.IOException;
importiere java.io.InputStream;
importiere java.util.List;
importiere javax.servlet.ServletException;
importiere javax.servlet.annotation.WebServlet;
importiere javax.servlet.http.HttpServlet;
importiere javax.servlet.http.HttpServletRequest;
importiere javax.servlet.http.HttpServletResponse;
importiere org.apache.commons.fileupload.FileItem; 
importiere org.apache.commons.fileupload.FileUploadException; 
importiere org.apache.commons.fileupload.disk.DiskFileItemFactory; 
importiere org.apache.commons.fileupload.servlet.ServletFileUpload;
importiere jtacc.filter.JTKit;
importiere jtacc.jtpub.DT; 
@WebServlet(urlPatterns = "/upfile/Datei") 
öffentliche Klasse UploadServlet erweitert HttpServlet {
	private statische endgültige lange SerialVersionUID = 1L;
	geschützt void doGet(HttpServletRequest Anfrage, HttpServletResponse Antwort) wirft ServletException, IOException {
		System.out.println(11);
		this.doPost(Anfrage, Antwort);
 }
 geschützt void doPost(HttpServletRequest Anfrage, HttpServletResponse Antwort) wirft ServletException, IOException {
 	String uri="/u/file/"+DT.getFormatDate("yyyyMMdd")+"/"; //Pfad definieren String tmpPath=JTKit.getBaseDIR()+uri; //Dies ist der persönliche Projektpfad, definieren Sie den Pfad entsprechend Ihren Anforderungen DiskFileItemFactory factory = new DiskFileItemFactory();
		factory.setRepository(new File(tmpPath));//temporärer Dateispeicherpfad ServletFileUpload fileUpload = new ServletFileUpload(factory);//Kernoperationsobjekt fileUpload.setHeaderEncoding("utf-8");//Schutz vor verfälschtem Code try {
			//Wenn Sie die Konvertierung in Echtzeit erzwingen möchten, müssen Sie das JAR-Paket herunterladen (commons-fileupload-1.3.3.jar).
			Liste<FileItem> Liste = fileUpload.parseRequest(Anfrage);
			für (FileItem fileItem : Liste) {
				InputStream in = fileItem.getInputStream();
				String Dateiname = fileItem.getName();
				wenn (Dateielement != null) {
					System.out.println(Dateiname);
					int länge = 0;
					byte[] array = neues byte[1024];
					FileOutputStream fos = neuer FileOutputStream(tmpPath+Dateiname);
					while((len = in.read(array))!=-1){//Gibt an, dass jedes Mal maximal 1024 Bytes gelesen werden können fos.write(array,0,len);
						fos.flush();
					}
					fos.schließen();
					in.schließen();
					fileItem.delete();
					Antwort.setCharacterEncoding("UTF-8");
					String realPath = URI+Dateiname;
					Antwort.getWriter().append(realPath);
				}
			}
		} Fang (FileUploadException e) {
			// TODO Automatisch generierter Catch-Block
			e.printStackTrace();
		}
 }
 
}

Testergebnisse

Ergänzung: Servlet erhält vom Formular übermittelte Daten

In der doPost-Methode des Servlets:

geschützt void doPost(HttpServletRequest Anfrage, HttpServletResponse Antwort) wirft ServletException, IOException {
}

Um die Formulardaten abzurufen, müssen Sie zunächst die Kodierung der Anforderung auf „UTF-8“ einstellen, um das Problem der Verstümmelung chinesischer Zeichen zu vermeiden:

Anfrage.setCharacterEncoding("utf-8");

So erhalten Sie eine einzelne Zeichenfolge:

String-Benutzername = request.getParameter("Benutzername");

So erhalten Sie ein Zeichenfolgenarray:

String[] Favoriten = request.getParameterValues("Favorit");

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. Sollten dennoch Fehler oder unvollständige Überlegungen vorliegen, freue ich mich über eine Korrektur.

Das könnte Sie auch interessieren:
  • Vue implementiert die Funktion zum Hochladen von Anhängen
  • Spring+Vue integriert UEditor Rich Text zum Hochladen von Bildanhängen
  • Zwei Lösungen für das 404-Problem beim Aktualisieren des Vue-Paket-Upload-Servers
  • Vue + Element + OSS realisiert das Hochladen von Front-End-Fragmenten und die Wiederaufnahme von Haltepunkten
  • Basierend auf Vue-Simple-Uploader, kapselt die globale Upload-Plug-In-Funktion des Dateisegment-Uploads, des sofortigen Uploads und der Breakpoint-Fortsetzung
  • Vue verwendet den Rich-Text-Editor vue-quill-editor und lädt Bilder auf den Server hoch
  • Realisieren Sie mobile Bild-Upload-, Komprimierungs-, Drag-and-Drop-Sortierungs- und Drag-and-Drop-Löschfunktionen basierend auf Vue2
  • Was Sie beim Hochladen von Bildern mit vue+vant beachten sollten
  • Vue realisiert das Hochladen nach dem Zuschneiden von Bildern
  • Implementierungsbeispiel zum Hochladen mehrerer Anhänge in Vue

<<:  Beispiel für den automatischen Start eines Anwendungsdienstes in einem Docker-Container

>>:  So ändern Sie das ursprüngliche Passwort von MySQL auf dem MAC

Artikel empfehlen

Zusammenfassung der verschiedenen Verwendungsmöglichkeiten von JSON.stringify

Vorwort Jeder, der schon einmal JSON verwendet ha...

Die Verknüpfungsmethode zwischen Menü und Registerkarte von vue+iview

Vue+iview-Menü und Tab-Verknüpfung Ich entwickle ...

JavaScript zum Erzielen eines Produktlupeneffekts

In diesem Artikel wird der spezifische JavaScript...

So ändern Sie die Systemsprache von CentOS7 in vereinfachtes Chinesisch

veranschaulichen Bei einer Eigeninstallation des ...

VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion

Inhaltsverzeichnis Vorwort 1. Etikettenstil defin...

JS versteht die Zeitzonen GMT und UTC genau

Inhaltsverzeichnis Vorwort 1. GMT Was ist GMT Ges...

Empfohlene 20 besten kostenlosen englischen Handschrift-Schriftarten

Jellyka BeesAntike Handschrift [Ank]* Jellyka Cutt...

Detaillierte Erläuterung des Datenproxys und der Ereignisse von VUE

Inhaltsverzeichnis Überprüfung der Object.defineP...

Tutorial zu HTML-Tabellen-Tags (21): Zeilenrahmen-Farbattribut BORDERCOLOR

Um die Tabelle zu verschönern, können Sie für die...

Standardmäßige Stilanordnung für HTML-Tags

html, address,blockquote,body, dd, div,dl, dt, fie...