Java实现图片上传功能(前后端:vue+springBoot)

时间:2024-10-06 07:05:53

Java实现图片上传功能(前后端:vue+springBoot)

  • 前言:
  • 前端:
    • 组件引入
    • 基础文件上传
    • 自定义上传方法
  • 后端:
    • 需要引入的jar包:
    • 基础文件上传
      • Controller层:
      • server层:
    • 自定义的多参数接口

前言:

我们在设计自己的网站的时候,一定会遇到上传图片的功能,比如:用户头像,商品图片。
这篇文章将带着大家设计一个可以使用的图片上传功能,请大家一步一步来,让我们在码路上越走越远。

前端:

组件引入

前端我们使用element-ui的组件。我这里以html加js的方式
1:引入,,element-ui

<script src="../static/js/util/"></script>
    <script src="/axios/0.18.0/"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/">
    <!-- 引入组件库 -->
    <script src="/element-ui/lib/"></script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

基础文件上传

2:element-ui中有多个例子,我们使用其中一个:

<el-upload
  class="avatar-uploader"
  action="/Manage/upBusinessImage"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
         = ();
      },
      beforeAvatarUpload(file) {
        const isJPG =  === 'image/jpeg';
        const isLt2M =  / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

上面是element-ui中的一个例子。我将会对其中的各个参数进行讲解。
其中的样式,我们不进行讲解,直接复制就可以。
el-upload中的参数:
action:后面是接口url,图片文件将会发送到该接口中。
:show-file-list:是否显示上传的图片列表
:on-success:上传成功后要执行的操作,“:”代表与js代码进行了绑定。
:before-upload:上传之前要执行的操作,比如检验是否是图片文件,图片的大小是否符合要求等。

在它的一个函数中使用了URL.createObjectURL();方法,这个地方要注意:elementUI中,自带的方法中的file,并不是指图片本身,而是他的一个dom。如果要是拿他的图片,就要用。

自定义上传方法

通过上面的方式就可以将图片文件发送给后端,但是,这个只是基础的功能,往往我们的业务不会如此简单,比如:我们可能将商品id,等信息一同发送后端,以保证后端确定图片的作用。此时上面的方式就满足不了我们的需求了。
为此我们需要设计自己的上传方法。于是改造过程:
1:action后面的路径改为空:action=“”
2:添加属性:http-request,后面跟自定义的方法名,例如::http-request=“uploader”
3:在js中书写自定义方法“uploader”

async uploader(params){

            let file = ;
            let clothesId;
            let styleId;
            let imgUrl;
            clothesId = ;
            styleId = ;
            imgUrl = 
            formData = new FormData();
            ('file', file);
            ('clothesId',clothesId);
            ('styleId',styleId);
            ('imgUrl',imgUrl);
            let data = await ("/Manage/upBusinessImage",formData)
        },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

说明一下如果要传递的是多个参数,则必须把多个参数整理成formData的形式进行发送。而到后端则需要用@RequestParam注解标识进行接收。

后端:

需要引入的jar包:

<dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.11.0</version>
</dependency>
  • 1
  • 2
  • 3
  • 4
  • 5

基础文件上传

Controller层:

@RequestMapping(value = "/Manage/upBusinessImage",method = )
    public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file) {
        return (file,"D:/img/HeadImages/");
    }
  • 1
  • 2
  • 3
  • 4

因为只传递了文件,所以只需要一个MultipartFile类型的file接收就可以了。

server层:

//上传操作
    private CommonResultVo uploadImage(MultipartFile file,String folder){
        if (file == null) {
            return ("请选择要上传的图片");
        }
        if (() > 1024 * 1024 * 10) {
            return ("文件大小不能大于10M");
        }
        //获取文件后缀
        String suffix = ().substring(().lastIndexOf(".") + 1, ().length());
        if (!"jpg,jpeg,gif,png".toUpperCase().contains(())) {
            return ("请选择jpg,jpeg,gif,png格式的图片");
        }
        String savePath = folder;
        File savePathFile = new File(savePath);
        if (!()) {
            //若不存在该目录,则创建目录
            ();
        }
        //通过UUID生成唯一文件名
        String filename = ().toString().replaceAll("-","") + "." + suffix;
        try {
            //将文件保存指定目录
            //(new File(savePath + filename));
            //File file1 = new File(());
            ((),new File(savePath + filename));
        } catch (Exception e) {
            ();
            return ("保存文件异常");
        }
        //返回文件名称
        return (filename,1);
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

代码里的CommonResultVoUtil是我自定义的结果工具类,大家可以根据自己的需求自己构建,也可直接返回字符串成功或者失败。

自定义的多参数接口

与上面的区别只是多使用了几个参数:

@RequestMapping(value = "/Manage/upBusinessImage",method = )
    public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file,
                                              @RequestParam(value = "clothesId", required = false) String clothesId,
                                              @RequestParam(value = "styleId", required = false) String styleId,
                                              @RequestParam(value = "imgUrl", required = false) String imgUrl) {
        return (file,clothesId,styleId,imgUrl);
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

拿到这些参数后可以根据某些参数去定位数据库中的某条记录,然后将图片位置保存入数据库中,以便后续访问。