Vue + SSM realisiert den Vorschaueffekt beim Hochladen von Bildern

<!-- Konfigurieren des Upload-Parsers -->
 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- Setzt das Anforderungscodierungsformat -->
  <Eigenschaftsname="Standardkodierung" Wert="UTF-8"></Eigenschaft>
</bean>

Paket com.wyf.controller;

importiere java.io.File;
importiere java.util.UUID;

importiere javax.servlet.http.HttpServletRequest;

importiere org.springframework.beans.factory.annotation.Autowired;
importiere org.springframework.web.bind.annotation.RequestMapping;
importiere org.springframework.web.bind.annotation.RequestMethod;
importiere org.springframework.web.bind.annotation.RequestParam;
importiere org.springframework.web.bind.annotation.RestController;
importiere org.springframework.web.multipart.MultipartFile;

importiere com.wyf.po.Result;
importiere com.wyf.service.FileServlet;

/**
 * Datei-Upload-Controller * 
 * @Autor ASUS
 *
 */
@RestController
öffentliche Klasse FileUploadController {

 @Autowired
 privates FileServlet FileServlet;

 /**
  * Bildupload ausführen* 
  * Lösen Sie das Problem verstümmelter chinesischer Schriftzeichen, wenn das Front-End die Back-End-Daten abruft: produced={"application/json; charset=UTF-8"}
  */
 @RequestMapping(Wert = "/uploadImg", Methode = RequestMethod.POST, erzeugt = { "application/json; Zeichensatz=UTF-8" })
 öffentliches Ergebnis handleUploadImg(@RequestParam("file") MultipartFile Datei, HttpServletRequest Anfrage) {
  // Überprüfen, ob die hochgeladene Datei existiert if (!file.isEmpty()) {
   // Den Originalnamen der hochgeladenen Datei abrufen String originalFilename = file.getOriginalFilename();
   //Pfad zum Speichern von BildernString rootPath = "G:\\Installationspaket\\Tomcat\\Installationspaket\\Tomcat 7.0\\FileDir\\";
   // Speicherverzeichnis für hochgeladene Dateien festlegen String path = "\\upload\\images\\applyShop";
   String dirPath = rootPath + Pfad + "\\";
   Datei Dateipfad = neue Datei (Verzeichnispfad);
   // Wenn die Adresse, unter der die Datei gespeichert ist, nicht existiert, erstellen Sie zuerst das Verzeichnis if (!filePath.exists()) {
    Dateipfad.mkdirs();
   }
   // String umbenennen newFileName = UUID.randomUUID() + "_" + originalFilename;
   versuchen {
    // Verwenden Sie die Schnittstellenmethode MultipartFile, um die Datei an den angegebenen Speicherort hochzuladen file.transferTo(new File(dirPath + newFileName));
   } Fang (Ausnahme e) {
    e.printStackTrace();
    returniere neues Ergebnis (false, „Upload-Fehler“);
   }
   // Relativen Pfad zurückgeben String srcPath = path + "\\" + newFileName;
   fileServlet.addUploadFIle(Quellenpfad);
   gib ein neues Ergebnis zurück (true, srcPath);
  }
  returniere neues Ergebnis(false, „Datei existiert nicht“);
 }
}

öffentliche Klasse Ergebnis {

 privates Boolesches Flag; //Verarbeitungsergebniskennung private String-Nachricht; //Zurückgegebene Ergebnisinformationen /* get() und set() weglassen*/
}

<Vorlage>
  <div Klasse="Hochladen">
    <div Klasse="img-container">
      <!-- Vorschaubild hochladen -->
      <img :src="src" alt />
    </div>
    <!-- Eingabe zum Hochladen von Dateien -->
    <form class="Eingabedatei" enctype="multipart/form-data" method="post">
      <input type="file" ref="upload" name="uploadImg" id="file" @change="getFile" multiple />
      <!-- Label hat ein For-Attribut, das auf die eindeutige ID der Eingabe verweist, daher ist ein Klick auf Label gleichbedeutend mit einem Klick auf die Eingabe -->
      <label for="file">Bild hochladen</label>
    </form>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
     quelle:erfordern('../../assets/dist/images/admin.jpg'),
     srcPath:''//Relativer Pfad des Bildes};
  },
  Methoden: {
   getFile(e) {
    let files = e.target.files[0]; //Hochgeladene Bildinformationen abrufen let formData = new FormData()
       formData.append('Datei',Dateien)
      dies.$axios.post("/api/uploadImg",formData).dann(Ergebnis=>{
       wenn(Ergebnis.Daten.Flag){
            this.srcPath = Ergebnis.Daten.Nachricht
            dies.src = `/imgURL${this.srcPath}`
            }anders{
            Konsole.Protokoll(Ergebnis.Daten.Nachricht)
        }
      })
    }
  }
};
</Skript>

<Connector Verbindungstimeout="20000" Port="8080" Protokoll="HTTP/1.1" Umleitungsport="8443"/>

<!--Lösen Sie das Problem der verstümmelten chinesischen Zeichen in der Adressleiste, indem Sie useBodyEncodingForURI="true" URIEncoding="UTF-8" in <Connector --> hinzufügen.
<!--useBodyEncodingForURI="true": bedeutet, dass Get- und Post-Anfragen die gleiche Kodierung verwenden -->
<!--URIEncoding="UTF-8": Anforderungskodierung ist UTF-8 -->
<Connector URIEncoding="UTF-8" Verbindungs-Timeout="20000" Port="8080" Protokoll="HTTP/1.1" Umleitungs-Port="8443" useBodyEncodingForURI="true"/>