SpringBoot项目中前后端对图片的上传与接收操作

这篇具有很好参考价值的文章主要介绍了SpringBoot项目中前后端对图片的上传与接收操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、问题介绍

在一个在线图片分享系统中,前端使用JS+jQuery,后端使用Maven管理项目,采用分层次目录结构(Controller、Service、Mapper等)的一个Java语言编写的SSM(Spring+SpringBoot+Mybatis)项目中,需要实现一个前端标签上传图片,后端Controller层接收并处理图片。

二、前端上传图片方案

1.上传

上传图片的方式有很多,可以采用base64、blob等类型处理,而本文由于前端上传图片采用的是原生JS标签input的file类型:

<input type="file">

这个标签选择文件后,图片的路径会显示在这个标签中,但直接使用这个标签显然是不可以获取到图片的(你只是访问本地路径可以看得见图片,但网页它不认识这个路径所意味着的图片文件)。

2.前端网页显示此上传的图片

(1)HTML代码:

<input type="file" id="uploadimage" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
<img id="showimage" style="width: auto;height: 80%;" src="" alt="请上传图片">

属性解释:
<input>标签:
id:ID属性值,用于JS定位该标签;
type:设置为file,提供一个可以上传文件的按钮;
accept:顾名思义,是限制接受的文件类型的,规定这个属性值可限定文件类型为图片,如.jpg、.png(高清)、.gif(动图)、.jpeg、.svg(不推荐);
<img>标签:
id:同上;
style:样式设定;
src:路径;
alt:加载图片失败或src为空时的默认文本。

(2)JS代码:

 document.getElementById("uploadimage").onchange = function(){//当input标签上传了一个图片时
     var file = this.files;//将当前图片文件赋值给file变量
     var reader = new FileReader();//创建一个新FileReader类
     reader.readAsDataURL(file[0]);//将图片文件传给该FileReder
     reader.onload = function ()//加载
     {
         var image = document.getElementById("showimage");
         image.src = reader.result;
     };
 }

3.前端上传该图片文件

使用JS代码处理该文件,采用FormData类型将该图片以二进制流的形式发给后端:
JS代码:
FormData类的使用:

var formData = new FormData();
formData.set("file", document.getElementById('uploadimage').files[0]);

使用$.ajax发送请求:

$.ajax({
    url: "images/insertOneImageFile",//后端Controller层处理图片文件的对应接口
    type: "post",
    data: formData,//发送的数据为FormData类
    async: false,
    cache: false,
    processData: false,   // 不处理发送的数据
    contentType: false,   // 不设置Content-Type请求头
    success:function (data) {
        $("#path").text(data);
        console.log(data);
    },
    error: function(error){
        imagestring = "";
        alert("上传图片出错!");
    }
});

4.后端处理FormData:

Controller层代码:

    @RequestMapping("/insertOneImageFile")
    public String insertOneImageFile(HttpServletRequest request, HttpServletRequest response, HttpSession session){
        MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;
        MultipartFile multipartFile = multipartRequest.getFile("file");
        assert multipartFile != null;
        MultipartFileToFile.saveMultipartFile(multipartFile, "src/main/resources/static/images");
        return MultipartFileToFile.saveMultipartFile(multipartFile, "target/classes/static/images");
    }

所使用的保存图片到本地路径的工具类1:MultipartFileToFile.class:
(注:本文默认已经配置好Spring及SpringBoot环境)

package com.id.utils;

import org.springframework.web.multipart.MultipartFile;

import java.io.*;
import java.util.UUID;

/**
 * @Description 存储和删除MultipartFile文件
 * @Author haoyalei
 **/
public class MultipartFileToFile {

    /**
     *
     * @param file
     * @param targetDirPath 存储MultipartFile文件的目标文件夹
     * @return 文件的存储的绝对路径
     */
    public static String saveMultipartFile(MultipartFile file, String targetDirPath){

        File toFile = null;
        if (file.equals("") || file.getSize() <= 0) {
            return null;
        } else {

            /*获取文件原名称*/
            String originalFilename = file.getOriginalFilename();
            /*获取文件格式*/
            String fileFormat = originalFilename.substring(originalFilename.lastIndexOf("."));

            String uuid = UUID.randomUUID().toString().trim().replaceAll("-", "");
            toFile = new File(targetDirPath + File.separator + uuid + fileFormat);

            String absolutePath = null;
            try {
                absolutePath = toFile.getCanonicalPath();

                /*判断路径中的文件夹是否存在,如果不存在,先创建文件夹*/
                String dirPath = absolutePath.substring(0, absolutePath.lastIndexOf(File.separator));
                File dir = new File(dirPath);
                if (!dir.exists()) {
                    dir.mkdirs();
                }

                InputStream ins = file.getInputStream();

                inputStreamToFile(ins, toFile);
                ins.close();

            } catch (IOException e) {
                e.printStackTrace();
            }



            return uuid + fileFormat;//uuid为保存时所使用的文件名;fileFormat为文件扩展名(.jsp什么的)
        }

    }

    //获取流文件
    private static void inputStreamToFile(InputStream ins, File file) {
        try {
            OutputStream os = new FileOutputStream(file);
            int bytesRead = 0;
            byte[] buffer = new byte[8192];
            while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
                os.write(buffer, 0, bytesRead);
            }
            os.close();
            ins.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 删除本地临时文件
     *
     * @param file
     */
    public static void deleteTempFile(File file) {
        if (file != null) {
            File del = new File(file.toURI());
            del.delete();
        }
    }
}

附言

由于本选题程序不便于公开,故此处只贴上核心代码。


  1. 参照链接:https://blog.csdn.net/weixin_45379185/article/details/125852990 ↩︎文章来源地址https://www.toymoban.com/news/detail-700041.html

到了这里,关于SpringBoot项目中前后端对图片的上传与接收操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot项目打成jar包后,上传的静态资源(图片等)如何存储和访问

    使用springboot开发一个项目,开发文件上传的时候,通常会将上传的文件存储到资源目录下的static里面,然后在本地测试上传文件功能没有问题,但是将项目打成jar包放到服务器上运行的时候就会报错,找不到对应目录。或者可以将上传文件存储到和jar包同级的目录下,但是无

    2024年02月12日
    浏览(58)
  • Ueditor 百度强大富文本Springboot 项目集成使用(包含上传文件和上传图片的功能使用)简单易懂,举一反三

    首先如果大家的富文本中不考虑图片或者附件的情况下,只考虑纯文本且排版的情况下我们可以直接让前端的vue来继承UEditor就可以啦。但是要让前端将那几个上传图片和附件的哪些功能给阉割掉! 然后就是说如果考虑到了上传图片或者视频和附件那么咱们还是用的前后分离

    2024年02月15日
    浏览(49)
  • SpringBoot3 + uniapp 对接 阿里云0SS 实现上传图片视频到 0SS 以及 0SS 里删除图片视频的操作(最新)

    UpLoadFile.vue deleteOssFile.js http.js FileUploadController.java AliOssUtil.java

    2024年04月14日
    浏览(47)
  • (前后端交互式)Ajax上传图片 + 更换背景图片

    上传-图片 注意1:上传的图片必须在2MB以内 注意2:服务器端oss(阿里云对象存储)为了安全性,图片url网址不能直接在浏览器地址栏访问 请用img/背景图方式进行使用 上传图片的代码实现 * 1. 获取图片文件 * 2. 使用 FormData 携带图片文件 * 3. 提交到服务器,获取图片url网址使

    2024年02月14日
    浏览(44)
  • SpringBoot文件上传同时,接收复杂参数

    目录 环境信息 问题描述 错误分析 解决方法 简单参数 总结         Spring Boot:2.0.8.RELEASE         Spring Boot内置的tomcat:tomcat-embed-core 8.5.37         收到文件上传的开发工作,要求能适配各种场景,并且各场景的请求参数不一样,因此接收的参数不能是固定的几个字段

    2024年02月09日
    浏览(43)
  • 网安入门11-文件上传(前后端绕过,变形马图片马)

    Upload-Labs是一个使用PHP语言编写、专注于文件上传漏洞的闯关式网络安全靶场。练习该靶场可以有效地了解并掌握文件上传漏洞的原理、利用方法和修复方案。 思考:他只让我传一个.jpg的图片,我想传一个.php的木马,两者什么区别 文件类型不一样 文件大小不一样 内容不一

    2024年01月25日
    浏览(45)
  • 【前后端的那些事】开源!快速上手富文本+富文本图片上传

    前言 :最近写项目,发现了一些很有意思的功能,想写文章,录视频把这些内容记录下。但这些功能太零碎,如果为每个功能都单独搭建一个项目,这明显不合适。于是我想,就搭建一个项目,把那些我想将的小功能全部整合到一起。实现 搭一次环境 ,处处使用。 本文主要

    2024年01月20日
    浏览(56)
  • SpringBoot后端接收Axios上传的文件

    很多时候,我们项目开发的过程中,难免会遇到文件上传的需求 对于 SpringBoot 项目,我们该如何编写一个文件上传的接口呢? 这里我用的是 阿里云OSS 云服务器来作为上传文件的存储仓库,比起存储在电脑本地,云服务器更加便于管理、性能更好并且更加 安全 ,值得我们选

    2024年02月22日
    浏览(45)
  • 前后端服务器分离时,前端如何上传图片到前端服务器?

    当前后端服务器分离时,前端上传图片到前端服务器可以采用以下几种方式: 1. 直接上传到前端服务器:可以通过使用HTML的`input type=\\\"file\\\"`元素,让用户选择图片文件并直接上传到前端服务器。前端服务器可以使用后端提供的API接口处理上传请求,然后将图片保存到前端服务

    2024年04月27日
    浏览(49)
  • 若依的多图片上传/回显/保存多图片路径url逗号隔开存数据库,前后端都有,拷贝即用

    用户在前端上传不等数量图片,现在需要把其相对/绝对路径存进数据库中,方便后期使用和页面回显. 后端存储pic字段是字符串 用于  用\\\",\\\"逗号  拼接 多个图片 url  1.html代码: 前端走马灯浏览已经上传的图片 前端JS方法,一共四个, 1.上传前校验方法 2.上传方法 3.上传数量限制方

    2024年02月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包