SpringBoot+Thymeleaf实现图片上传和显示

最新推荐文章于 2024-07-22 11:34:18 发布

徐林2333

最新推荐文章于 2024-07-22 11:34:18 发布

阅读量2.7k

点赞数 3

分类专栏：大二

原文链接：https://blog.csdn.net/qq_49078070/article/details/115520561

版权

大二专栏收录该内容

30 篇文章 1 订阅

订阅专栏

1.导入两个图片上传所需要的依赖，查看自己是否已经导入。

 <!--图片上传依赖-->
        <dependency>
            <groupId>com.alibaba</groupId>  
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>

2.添加本地图片映射在application启动类中添加：


@SpringBootApplication
@MapperScan("com.example.mapper")
public class MybatisplusApplication implements WebMvcConfigurer {

    public static void main(String[] args) {
        SpringApplication.run(MybatisplusApplication.class, args);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        /*
        *  资源映射路径
        *  addResourceHandler:访问映射路径
        *  addResourceLocations:资源的绝对路径
         */
        registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/ruoyi/mybatisplus/src/main/resources/static/img/");
    }
}

3.html主页面
<td><img th:src="@{${a.file}}" width="90" height="80"></td>图片显示

<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>
    <title>图片上传</title>
</head>
<body xmlns:th="http://www.w3.org/1999/xhtml">
<div>
    <table border="1px" width="200px" cellspacing="0">
        <a th:href="@{/user/toAdd}">添加</a><br/>
        <tr>
            <td>id</td>
            <td>账号</td>
            <td>密码</td>
            <td>图片上传</td>
        </tr>
        <tr th:each="a:${a}">
            <td th:text="${a.id}"></td>
            <td th:text="${a.userName}"></td>
            <td th:text="${a.password}"></td>
            <td><img th:src="@{${a.file}}" width="90" height="80"> </td>
        </tr>
    </table>
</div>
</body>
</html>

4.html添加页面
<input name="file" id="file1" type="hidden"> 这的name是向后端数据库添加的
<input type="file" id="file">这是下面jq进行操作用的
----------------图片上传记得导入jq依赖----------------

  <tr>
           <td>
               <input name="file" id="file1"  type="hidden">
               <input type="file"  id="file">
               <p id="url"><img src="" width=200></p>
               <input type="button" id="button" value="上传" >
               <input type="button" id="t_button" value="取消上传" >
           </td>
       </tr>


    $(function () {
        $("#button").click(function () {
            var form = new FormData();
            form.append("file", document.getElementById("file").files[0]);
            $.ajax({
                url: "/user/upload",        //后台url
                data: form,
                cache: false,
                async: false,
                type: "POST",                   //类型，POST或者GET
                dataType: 'json',              //数据返回类型，可以是xml、json等
                processData: false,
                contentType: false,
                success: function (data) {      //成功，回调函数
                    if (data) {
                        var pic="/imctemp-rainy/"+data.fileName;
                        alert(pic);
                        $("#url img").attr("src",pic);
                        $("#file1").val("/imctemp-rainy/"+data.fileName)
                        // alert(JSON.stringify(data));

                    } else {
                        alert("失败");
                    }

                },
                error: function (er) {          //失败，回调函数
                    alert(JSON.stringify(data));
                }
            });
        });

        $("#t_button").click(function () {
            //这里分割字符串 /imctemp-rainy/157352875235607c10257539a5f4dcdaab233ca2832a5.jpg
            //需要用/分割字符先后获取最后一段字符串去上传到后台
            //alert($("#url img").attr("src"));
            var img = $("#url img").attr("src");
            var str = img.split("/");
            var str_img=str[str.length-1];
            //alert(str_img);
            $.post("/user/deleteImages",{filePath:str_img},function(data){
                alert(data);
                //这里我们取消上传成功之后去给换成一个暂无图片的一个图
                $("#url img").attr("src","/imctemp-rainy/11.jpg");
                $("#file1").val("/imctemp-rainy/11.jpg");
            });
        });
    })

5.控制器中图片上传记得导入pom依赖 fastjson

  public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
        File targetFile = new File(filePath);
        if (!targetFile.exists()) {
            targetFile.mkdirs();
        }
        FileOutputStream out = new FileOutputStream(filePath +"/"+ fileName);
        out.write(file);
        out.flush();
        out.close();
    }
    //处理文件上传
    @ResponseBody //返回json数据
    @RequestMapping(value = "upload", method = RequestMethod.POST)
    public JSONObject uploadImg(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        String contentType = file.getContentType();
        //System.out.print(contentType);
        String fileName = System.currentTimeMillis()+file.getOriginalFilename();
        String filePath = "D:/ruoyi/mybatisplus/src/main/resources/static/img/";
        JSONObject jo = new JSONObject();//实例化json数据

        if (file.isEmpty()) {
            jo.put("success", 0);
            jo.put("fileName", "");
        }
        try {
            uploadFile(file.getBytes(), filePath, fileName);
            jo.put("success", 1);
            jo.put("fileName", fileName);
            // jo.put("xfileName", filePath+"/"+fileName);
        } catch (Exception e) {
            // TODO: handle exception

        }


        //返回json
        return jo;

    }


    @ResponseBody //返回json数据
    @RequestMapping("deleteImages")
    public String deleteImages(HttpServletRequest request) {
        String resultInfo = null;
        String filePath = request.getParameter("filePath");
        //这里是可以在控制器分割字符的一个方法
        //int lastIndexOf = filePath.lastIndexOf("/");
        //String sb = filePath.substring(lastIndexOf+1,filePath.length());
        //由于我们只获取了图片的名称并没有获取到所有的地址，，所以我们需要去给他进行添加存放图片的地址
        File file = new File("D:/ruoyi/mybatisplus/src/main/resources/static/img/"+filePath);
        if (file.exists()) {
            if (file.delete()) {
                resultInfo = "1-删除成功";
            }else {
                resultInfo = "0-删除失败";
            }
        }else {
            resultInfo = "文件不存在！";
        }
        return resultInfo;
    }

6.html修改页面

   <tr>
               <!--      <td><img th:src="@{${a.file}}"  width="90" height="80"></td>-->
                     <th>
                         <input name="file" id="file1"  type="hidden" th:value="${apple.file}"><!--修改时候需要添加th:value，value获取之前已存在的图片属性-->
                         <input type="file"  id="file">
                         <p id="url"><img th:src="@{${a.file}}"  width="90" height="80"></p>
                         <input type="button" id="button" value="上传" >
                         <input type="button" id="t_button" value="取消上传" >
                     </th>
                 </tr>