SpringMVC+Vue文件上传

异步上传（后端springmvc加前端vue）

后台

采用springmvc，实现获取到相对路径和绝对路径存储为json传到前端作为新增到数据库里的数据

//文件上传
    @PostMapping(value = "/upLoading")
    @ResponseBody
    public Result<HashMap<String,String>> upLoading(MultipartFile file,HttpServletRequest request){
        System.out.println("进入文件上传");
        //定义要返回的绝对路径和相对路径
        String absolutePath=null;
        String relativePath=null;

        Result<HashMap<String,String>> result = new Result<HashMap<String,String>>();
        //获得服务器所在路径
        String path = request.getSession().getServletContext().getRealPath("/")+file.getOriginalFilename();
        //获得上传文件的文件名
        String fileName=file.getOriginalFilename();
        System.out.println(fileName);
        //xxxxx.xxx
        //UUID.randomUUID()
        //UUID:随机生成一段字符串，16-18位由字母加数字拼接而成，保证10年不重复
        fileName = UUID.randomUUID()+fileName.substring(fileName.lastIndexOf("."));
        System.out.println(fileName);
        //设置绝对路径和文件存储路劲
        absolutePath = "D:\\ideaProjects\\SSMApp\\src\\main\\web\\statics\\uploadfiles\\"+fileName;
        //设置相对文件路径
        relativePath="statics\\uploadfiles\\"+fileName;
        System.out.println(path);
        HashMap<String ,String> map=new HashMap<String, String>();
        map.put("absolutePath",absolutePath);
        map.put("relativePath",relativePath);
        //保存文件
        try {
            file.transferTo(new File(absolutePath));
            result.setResult(map);
            result.setMessage("文件上传成功");
        }catch (Exception exce){
            result.setMessage("文件上传失败："+exce.getMessage());
            result.setSuccess(false);
            System.out.println(exce.getMessage());
        }
        return result;
    }

前端

部分前端（重要实现前端部分）

<div class="item form-group"><!--for="name"-->
            <label class="control-label col-md-3 col-sm-3 col-xs-12" >LOGO图片 <span class="required">*</span>
            </label>
            <div class="col-md-6 col-sm-6 col-xs-12"><!--type="file"  -->
            <input type="file"  @change="upLoading($event)" v-model="params.file" class="form-control  col-md-7 col-xs-12" name="logoPicPath"  required="file" id="logoPicPath"  accept="jpg,jpeg,png"/>
              <span style="display: none" v-model="params.logoPicPath">
              <span style="display: none" v-model="params.logoLocPath">
              <span class="add-file-right-more">支持扩展名：jpg,jpeg,png</span>
              ${fileUploadError }
            </div>
          </div>

<script>
new Vue({
	params:{
		logoPicPath:"",    //相对路径
		logoLocPath:""    //绝对路径
	}
}),
methods:{
		 //文件上传
          upLoading(even){
            this.params.file=even.target.files[0];
            console.log(this.params.file.name)
            console.log("进入文件上传")

            var forms = new FormData()
            forms.append("file",this.params.file,this.params.file.name);
            var configs = {
              headers: { "Content-Type": "multipart/form-data" }
            };
            console.log(this.params.file);
            axios.post("/dev/upLoading",forms ,configs).then(res=>{
              console.log(res)
              this.params.logoPicPath=res.data.result.relativePath;
              this.params.logoLocPath=res.data.result.absolutePath;  //绝对
                        console.log(res)
            })
          }

}

</script>