<!-- 配置文件上傳解析器 -->
 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- 設(shè)置請(qǐng)求編碼格式 -->
  <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;

/**
 * 文件上傳控制器
 * 
 * @author ASUS
 *
 */
@RestController
public class FileUploadController {

 @Autowired
 private FileServlet fileServlet;

 /**
  * 執(zhí)行圖片上傳
  * 
  * 解決前端獲取后臺(tái)數(shù)據(jù)中文亂碼：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) {
  // 判斷所上傳文件是否存在
  if (!file.isEmpty()) {
   // 獲取文件上傳的原始名稱(chēng)
   String originalFilename = file.getOriginalFilename();
   //存儲(chǔ)圖片的路徑
   String rootPath = "G:\\安裝包\\Tomcat\\安裝包\\Tomcat 7.0\\FileDir\\";
   // 設(shè)置上傳文件的保存地址目錄
   String path = "\\upload\\images\\applyShop";
   String dirPath = rootPath + path + "\\";
   File filePath = new File(dirPath);
   // 如果保存文件的地址不存在，就先創(chuàng)建目錄
   if (!filePath.exists()) {
    filePath.mkdirs();
   }
   // 重新命名
   String newFileName = UUID.randomUUID() + "_" + originalFilename;
   try {
    // 使用MultipartFile接口的方法完成文件上傳到指定位置
    file.transferTo(new File(dirPath + newFileName));
   } catch (Exception e) {
    e.printStackTrace();
    return new Result(false, "上傳錯(cuò)誤");
   }
   // 返回相對(duì)路徑
   String srcPath = path + "\\" + newFileName;
   fileServlet.addUploadFIle(srcPath);
   return new Result(true, srcPath);
  }
  return new Result(false, "文件不存在");
 }
}

public class Result {

 private boolean flag;//處理結(jié)果標(biāo)識(shí)
 private String message;//返回的結(jié)果信息
 /* 省略get()和set()*/
}

<template>
  <div class="upload">
    <div class="img-container">
      <!-- 上傳預(yù)覽圖片 -->
      <img :src="src" alt />
    </div>
    <!-- 文件上傳的input -->
    <form class="input-file" enctype="multipart/form-data" method="post">
      <input type="file" ref="upload" name="uploadImg" id="file" @change="getFile" multiple />
      <!-- label一個(gè) for 屬性指向input的唯一 id ，這樣點(diǎn)擊label就相當(dāng)于點(diǎn)擊input -->
      <label for="file">上傳圖片</label>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
     src:require('../../assets/dist/images/admin.jpg'),
     srcPath:''//圖片相對(duì)路徑
    };
  },
  methods: {
   getFile(e) {
    let files = e.target.files[0]; //獲取上傳圖片信息
  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"/>

<!--解決地址欄輸入中文亂碼問(wèn)題在<Connector中加入 useBodyEncodingForURI="true" URIEncoding="UTF-8" -->
<!--useBodyEncodingForURI="true"：代表get和post請(qǐng)求用一樣的編碼  -->
<!--URIEncoding="UTF-8"：請(qǐng)求編碼為utf-8  -->
<Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"     useBodyEncodingForURI="true"/>