Vue+SSM realizes the preview effect of picture upload

<!-- Configuring the upload parser -->
 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- Set the request encoding format -->
  <property name="defaultEncoding" value="UTF-8"></property>
</bean>

package com.wyf.controller;

import java.io.File;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

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

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

/**
 * File upload controller * 
 * @author ASUS
 *
 */
@RestController
public class FileUploadController {

 @Autowired
 private FileServlet fileServlet;

 /**
  * Execute image upload* 
  * Solve the problem of Chinese garbled characters when the front-end obtains the back-end data: produces={"application/json; charset=UTF-8"}
  */
 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST, produces = { "application/json; charset=UTF-8" })
 public Result handleUploadImg(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
  // Check if the uploaded file exists if (!file.isEmpty()) {
   // Get the original name of the uploaded file String originalFilename = file.getOriginalFilename();
   //Path to store imagesString rootPath = "G:\\Installation package\\Tomcat\\Installation package\\Tomcat 7.0\\FileDir\\";
   // Set the save directory of uploaded files String path = "\\upload\\images\\applyShop";
   String dirPath = rootPath + path + "\\";
   File filePath = new File(dirPath);
   // If the address where the file is saved does not exist, create the directory first if (!filePath.exists()) {
    filePath.mkdirs();
   }
   // Rename String newFileName = UUID.randomUUID() + "_" + originalFilename;
   try {
    // Use the MultipartFile interface method to upload the file to the specified location file.transferTo(new File(dirPath + newFileName));
   } catch (Exception e) {
    e.printStackTrace();
    return new Result(false, "Upload error");
   }
   // Return relative path String srcPath = path + "\\" + newFileName;
   fileServlet.addUploadFIle(srcPath);
   return new Result(true, srcPath);
  }
  return new Result(false, "file does not exist");
 }
}

public class Result {

 private boolean flag; //Processing result identifier private String message; //Returned result information /* Omit get() and set()*/
}

<template>
  <div class="upload">
    <div class="img-container">
      <!-- Upload preview image -->
      <img :src="src" alt />
    </div>
    <!-- Input for file upload -->
    <form class="input-file" enctype="multipart/form-data" method="post">
      <input type="file" ref="upload" name="uploadImg" id="file" @change="getFile" multiple />
      <!-- label has a for attribute pointing to the unique id of input, so clicking on label is equivalent to clicking on input -->
      <label for="file">Upload image</label>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
     src:require('../../assets/dist/images/admin.jpg'),
     srcPath:''//Relative path of the image};
  },
  methods: {
   getFile(e) {
    let files = e.target.files[0]; //Get uploaded image information let formData = new FormData()
       formData.append('file',files)
      this.$axios.post("/api/uploadImg",formData).then(result=>{
       if(result.data.flag){
            this.srcPath = result.data.message
            this.src = `/imgURL${this.srcPath}`
            }else{
            console.log(result.data.message)
        }
      })
    }
  }
};
</script>

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

<!--Solve the problem of garbled Chinese characters in the address bar by adding useBodyEncodingForURI="true" URIEncoding="UTF-8" in <Connector -->
<!--useBodyEncodingForURI="true": means get and post requests use the same encoding -->
<!--URIEncoding="UTF-8": request encoding is utf-8 -->
<Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" useBodyEncodingForURI="true"/>