SpringBoot图片上传
毕设终于写到头像上传了,本来想用Vue写来着,但是一直不顺利,还是对Vue用的不太熟.所以就用jquery写了.
首先添加以下标签
<img id="avatarPreview" :src="user.avatar" alt="" title="点击更换图片" />
<input id="upload" name="file" type="file" accept="image/png,image/gif,image/jpeg,image/jpg" />
<button type="button" id="uploadphoto">上传</button> 接下添加点击事件
<script type="text/javascript">
$(function () {
$("#uploadphoto").hide();
//点击选择文件按钮显示上传按钮
$("#upload").click(function () {
$("#uploadphoto").show();
})
$('#uploadphoto').click(function () {
$("#uploadphoto").hide();
var file = document.getElementById("upload").files[0]
var param = new FormData() // 创建form对象
param.append('file', file) // 通过append向form对象添加数据
var config = {
// 添加请求头 向后台传入token, 这个multipart/form-data必需 headers: {'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + getUser().token}
}
axios.post('http://localhost:9002/user/uploadAvatar', param, config)
.then(res => {
if(res.data.flag){
vm.$data.user.avatar=res.data.data.url;
}
}).catch(res=>{
console.log(res)
})
})
})
</script>
后端:
//头像上传
@PostMapping("/uploadAvatar")
public Result uploadAvatar(@PathVariable MultipartFile file){
//判断token的代码就省略了
if(file.isEmpty()){
return new Result(false,StatusCode.ERROR,"请选择文件");
}
String fileName = file.getOriginalFilename();//文件名
String suffixName = fileName.substring(fileName.lastIndexOf("."));//后缀名
String path = "E:/workspace/JavaEEWeb/tsemap-parent/tsemap-user/src/main/resources/static/img"; //文件存储位置 我放在了我的项目下
fileName=UUID.randomUUID()+suffixName;//图片名
File dest = new File(path+"/"+fileName);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
String url="./img/"+fileName;
Map map=new HashMap();
map.put("url",url);
return new Result(true,StatusCode.OK,"上传成功",map);
} catch (IOException e) {
e.printStackTrace();
}
return new Result(false,StatusCode.ERROR,"上传失败");
}
效果大概就是这样:
点击上传:
大概就是这样吧 bug还是有 后续等整个毕设写完了再改细节吧
SpringBoot图片上传的更多相关文章
- SpringBoot图片上传(四) 一个input上传N张图,支持各种类型
简单介绍:需求上让实现,图片上传,并且可以一次上传9张图,图片格式还有要求,网上找了一个测试了下,好用,不过也得改,仅仅是实现了功能,其他不尽合理的地方,还需自己打磨. 代码: //html<d ...
- SpringBoot图片上传(三)——调用文件上传项目的方法(同时启动两个项目)
简单说明:图片上传有一个专门的工程A,提供了图片的上传和下载预览,工程B涉及到图片上传以及回显,都是调用的工程A的方法,言外之意就是要同时启动两个项目. 代码: //工程B的html代码 <di ...
- SpringBoot图片上传(五) 上一篇的新版本,样式修改后的
简单描述:一次上传N张图片(N可自定义):上传完后图片回显,鼠标放到已经上传的图片上后,显示删除,点击后可以删除图片,鼠标离开后,图片恢复. 效果:一次上传多个图片后的效果 上传成功: 鼠标悬浮到图片 ...
- SpringBoot图片上传(一)
简单描述:点击上传文件的图标,上传文件,上传成功后,图标编程上传的图片. 吐槽:文件上传下载这种东西,总是感觉莫名的虚-_-|| 也不知道是造了什么孽,(其实就是IO File这一块的知识了解的不太 ...
- SpringBoot图片上传(二)
需求简介:做新增的时候,需要上传图片.(⊙o⊙)…这需求描述也太简单了吧,限制文件大小60*60 512kb ,第一次做,记录一下嗷,废话就不啰嗦了 上代码 代码: //html代码<div c ...
- 如何在SpringBoot当中上传多个图片或者上传单个图片 工具类
如何在SpringBoot当中上传多个图片[上传多个图片 ] 附赠工具类 1.SpringBoot 上传图片工具类 public class SpringUploadUtil { /*** * 上传图 ...
- SpringBoot + Vue前后端分离图片上传到本地并前端访问图片
同理应该可用于其他文件 图片上传 application.yml 配置相关常量 prop: upload-folder: E:/test/ # 配置SpringMVC文件上传限制,默认1M.注意MB要 ...
- springboot+UEditor图片上传
springboot+UEDitor百度编辑器整合图片上记录于此 1.下载ueditor插件包,解压到static/ueditor目录下 2.在你所需实现编辑器的页面引用三个JS文件 1) uedi ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
随机推荐
- 创建只读账号oracle
1.创建用户,指定哪个表空间create user test2 identified by "123" default tablespace BDCDJ_XC temporary ...
- 利用pyinstaller生成exe之后,运行不能正常产生结果文件问题记录
https://segmentfault.com/q/1010000011284617/a-1020000011493026 在此链接已解决问题,现在在这里在详细记录一次 问题描述: 利用pychar ...
- Django 中的JsonResponse 和 json区别
from django.http import JsonResponse JsonResponse 里面代码会加这一个响应头 kwargs.setdefault('content_type', 'ap ...
- jquery:input操作
1:让一个或一组单选框取消选择 $(".radio1").attr("checked",false); 2:查看一组单选框有么有被选中一个 $(".r ...
- rm命令详解
1.简介: rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所有文件及子目录均删除.对于链接文件,只是删除了链接,原有文件均保持不变. 注意:rm是一个 ...
- ACM-ICPC 2018 南京赛区网络预赛 J.sum
A square-free integer is an integer which is indivisible by any square number except 11. For example ...
- 冒泡排序 & 选择排序(升序)
软件工程上老师讲流程图时,要求画冒泡排序和选择排序的流程图--------问题来了,故想基于百度两种排序后,自我总结的写些什么 请将一维数组a[n] 里面的 n个元素 升序排好 ---------- ...
- IDEA 中tomcat日志位置
参考 https://blog.csdn.net/dela_/article/details/78555977 /home/dela/.IntelliJIdea2017.1/system/tomcat ...
- hashCode 与 equals
面试官可能会问你:“你重写过 hashcode 和 equals 么,为什么重写equals时必须重写hashCode方法?” hashCode()介绍 hashCode() 的作用是获取哈希码, ...
- 搞搞电脑微信表情的破解(.dat转png or jpg)
首先感谢:https://blog.csdn.net/weixin_42440768/ 因为狗子喜欢之前那个头像,但是没找到,于是我想看看我们之前的斗图过程中有没有发她的头像. 这是做这件事情的起因. ...