SpringBoot上传图片的示例

程序员文章站 2022-03-24 15:09:40

说明：通常项目中，如果图片比较多的话，都会把图片放在专门的服务器上，而不会直接把图片放在业务代码所在的服务器上。下面的例子只是为了学习基本流程，所以放在了本地。1、单张图片上传1.1、前端用表单提交前...

说明：通常项目中，如果图片比较多的话，都会把图片放在专门的服务器上，而不会直接把图片放在业务代码所在的服务器上。下面的例子只是为了学习基本流程，所以放在了本地。

1、单张图片上传

1.1、前端用表单提交

前端代码：

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>title</title>
</head>
<body>
<form method="post" action="/uploads" enctype="multipart/form-data">
 <input type="file" name="files" multiple>
 <input type="submit" value="上传">
</form>
</body>
</html>

后端代码;

simpledateformat formatter = new simpledateformat("/yyyy/mm/dd/");
 @requestmapping("/upload")
 public string fileupload(multipartfile file, httpservletrequest request){
  string time = formatter.format(new date());
  //图片上传服务器后所在的文件夹
  string realpath = request.getservletcontext().getrealpath("/img") + time;
  file folder = new file(realpath);
  if(!folder.exists())
   folder.mkdirs();

  //通常需要修改图片的名字（防止重复）
  string oldname = file.getoriginalfilename();
  string newname = uuid.randomuuid() + oldname.substring(oldname.lastindexof("."));

  try {
   //将文件放到目标文件夹
   file.transferto(new file(folder, newname));

   //通常还需要返回图片的url，为了通用性，需要动态获取协议，不要固定写死
   string returnurl = request.getscheme() + "://" + request.getservername() + ":" + request.getserverport() + "/img" + time + newname;
   return returnurl;
  } catch (ioexception e) {
   e.printstacktrace();
  }


  return null;
 }

1.2、前端用ajax提交

前端代码与上面的略有不同，后台代码是一样的。

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>title</title>

</head>
<body>
 <input type="file" id="file">
 <input type="submit" value="上传" onclick="uploadfile()">
<h1 id="result"></h1>
</body>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
function uploadfile() {
 var file = $("#file")[0].files[0];
 var formdata = new formdata();
 formdata.append("file", file);
 $.ajax({
  type:"post",
  url:"/upload",
  processdata:false,
  contenttype:false,
  data:formdata,
  success:function (msg) {
   $("#result").html(msg);
  }
 })
}
</script>
</html>

2、多个图片上传

前端代码：

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>title</title>
</head>
<body>
<form method="post" action="/uploads" enctype="multipart/form-data">
 <input type="file" name="files" multiple>
 <input type="submit" value="上传">
</form>
</body>
</html>

后台代码：

 @requestmapping("/uploads")
 public string fileuploads(multipartfile[]files, httpservletrequest request){
  string time = formatter.format(new date());
  //图片上传服务器后所在的文件夹
  string realpath = request.getservletcontext().getrealpath("/img") + time;
  file folder = new file(realpath);
  if(!folder.exists())
   folder.mkdirs();

  for (multipartfile file : files) {
   //通常需要修改图片的名字（防止重复）
   string oldname = file.getoriginalfilename();
   string newname = uuid.randomuuid() + oldname.substring(oldname.lastindexof("."));

   try {
    //将文件放到目标文件夹
    file.transferto(new file(folder, newname));

    //通常还需要返回图片的url，为了通用性，需要动态获取协议，不要固定写死
    string returnurl = request.getscheme() + "://" + request.getservername() + ":" + request.getserverport() + "/img" + time + newname;
    system.out.println(returnurl);
   } catch (ioexception e) {
    e.printstacktrace();
   }
  }

  return null;
 }

3、问题记录

在后台代码中，有一行需要注意下：

 string realpath = request.getservletcontext().getrealpath("/img") + time;

需要理解一下realpath究竟指的是什么。刚开始测试的时候，图片上传成功后，后台idea里找不到对应的图片，然后根据它返回的realpath，在c盘用户目录下的某个文件夹里找到了该图片（user/appdata/....）。

shift+shift 全局搜索 getcommondocumentroot这个方法，点进去，有个静态数组：common_doc_roots

 private static final string[] common_doc_roots = new string[]{"src/main/webapp", "public", "static"};

发现默认是指webapp下，或者根目录下的public、static文件夹（与src并列）。然而这些目录都没有，所以spring定向到了工程目录以外的一个位置。

于是我在根目录下新建一个static文件夹，再次上传，果然有效了。

SpringBoot上传图片的示例

以上就是springboot上传图片的示例的详细内容，更多关于springboot上传图片的资料请关注其它相关文章！

SpringBoot上传图片的示例

ReactNative实现图片上传功能的示例代码

javascript - 用户发帖应用开发中，用户异步上传了图片，但最终帖子没发布，那么上传的图不就没有用了吗怎么处理这种情况？

ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例

限制ckeditor上传图片文件大小的方法

HTML5拖拉上传文件的示例代码分享

asp.net图片上传生成缩略图的注意事项

node.js中实现kindEditor图片上传功能的方法教程

php 生成自动创建文件夹并上传文件的示例代码_PHP教程

html5文件拖拽上传的示例代码分享

[PHP]移动端网页如何使用JqueryMobile+PHP实现上传图片的功能