文件上传
我们的文件上传需要一个映射来方便多人同时访问这个网页,所以我们需要在启动类里面加上映射
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/img/");
}
里面的addResourceLocations(“file:D:/img/”)这个里面的路径你可以随便更改。
HTML
<div id="app">
<input type="file" name="file" id="file"/>
<p id="url"><img src="" width="200px"/></p>
<input type="button" id="button" v-on:click="check()" value="上传"/>
</div>
jQuery
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
ours:{},
},
methods:{
check:function(){
var form=new FormData();
form.append("file",document.getElementById("file").files[0]);
$.ajax({
url:"/our/upload",//前往控制器的路径
data:form,
cache:false,
async:false,//同步异步,为false为同步
type:"post",//用什么方式传图片
dataType:"json",
processData:false,
contentType:false,
success:function(data){
//alert(JSON.stringify(data));
if(data.success==1){
alert("保存成功");
var pic="/imctemp-rainy/"+data.filename;
$("#url img").attr("src",pic);//给img
}else{
alert("失败");
}
},
error:function(er){
alert(JSON.stringify(data));
}
});
}
}
});
</script>
controller
//文件上传
@RequestMapping(value = "upload",method = RequestMethod.POST)
@ResponseBody
public JSONObject upload(@RequestParam("file") MultipartFile file,HttpServletRequest request) {
String contenttype=file.getContentType();
String filename=System.currentTimeMillis()+file.getOriginalFilename();//这是给你的图片改名字
String filePath="D:/img";//这个要设计成你的电脑路径
JSONObject jo=new JSONObject();
if (file.isEmpty()) {//判断文件夹是否存在
jo.put("success", 0);
jo.put("filename","");
}
try {
uploadfile(file.getBytes(),filePath,filename);//调用方法
jo.put("success", 1);
jo.put("filename",filename);
//如果你想往数据库中添加照片路径,就添加以下代码
Our our=new Our();
our.setOname(filename);
ourService.save(our);
} catch (Exception e) {
// TODO: handle exception
}
return jo;
}
//这是往电脑文件夹里面添加图片
public static void uploadfile(byte[] file,String filePath,String filename)throws Exception {
File targetFile=new File(filePath);
if (!targetFile.exists()) {
targetFile.mkdir();
}
FileOutputStream out=new FileOutputStream(filePath+"/"+filename);
out.write(file);
out.flush();
out.close();
}