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