大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

异步上传（后端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>