SpringMvc划分细讲（3）

2023-12-09 13:46:57

回顾

朋友们大家好，又见面了，上篇我们简单的了解了如何把控制层的数据渲染到页面，返回json数据，定义全局异常处理，我们还是老样子简单的回顾一下：

1. 后台保存数据到前台页面显示： model对象 request对象。  session.
2. ajax返回json数据。---->jackson
3. 全局异常处理。
4. 拦截器:

注意: 都写绝对路径: jsp页面 ${pageContext.request.contextPath}
                 后端: request.getContextPath()

正文

还是老规矩废话不多说，开始今天的内容：

1.文件上传

   ①普通本地上传
   ②ajax本地上传。
   ③普通上传OSS

1.1普通本地上传

①  复习:

Ⅰ InputStream字节输入流 OutputStream字节输出流 File文件类。

Ⅱ 思考: 文件上传----上传到的位置? 服务器。 /目录

Ⅲ 文件上传的条件:

        1.表单中。
        2.表单的提交方式method必须是post.
        3.表单上传的编码必须是二进制。enctype="multipart/form-data"
        4.input的类型必须file类型。而且该输入框必须有name属性。

② 建立前端网页

SpringMvc划分细讲（3）

<form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data">
    头像:<input type="file" name="myfile"/><br>
    姓名:<input type="text" name="name"/><br>
    性别:<input type="text" name="sex"/><br>
    <input type="submit" value="提交"/>
</form>

③ 引入需要的第三方依赖。commons-fileupload

<!--①文件上传的依赖-->
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.4</version>
</dependency>

④ 配置文件上传解析器

SpringMvc划分细讲（3）

 

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:component-scan base-package="com.fan"/>

    <mvc:default-servlet-handler/>
    <mvc:annotation-driven/>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
          <property name="prefix" value="/views/"/>
          <property name="suffix" value=".jsp"/>
    </bean>

    <!--文件上传的解析器-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--设置文件上传的大小：单位为b 1024*1024*100 -->
        <property name="maxUploadSize" value="104857600"/>
        <!--设置编码-->
        <property name="defaultEncoding" value="utf-8"/>
    </bean>
</beans>

⑤ 建立一个实体类

SpringMvc划分细讲（3）

⑥ 编写controller代码 

SpringMvc划分细讲（3）

 

package com.fan.controller;

import com.fan.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.util.Date;

/**
 * @program: 12.7-1
 * @description:
 * @author: 老范
 * @create: 2021-12-07 15:22
 **/
@Controller
public class UploadController {
    @RequestMapping("/upload")//springmvc把上传的文件封装到MultipartFile类中。
                             //myfile必须和表单中name名称一致。
    public  String upload01(MultipartFile myfile, HttpServletRequest request, User user){
        HttpSession session = request.getSession();//获取session对象
        ServletContext servletContext = session.getServletContext();//应用程序对象
        String path = servletContext.getRealPath("/upload");// 获取工程下upload文件夹的真实路径
        //2.根据该路径创建文件对象
        File file = new File(path);
        if (!file.exists()){ //指定路径的文件不存在
            file.mkdir();//创建该文件
        }

        //3.获取上传的文件名
        String filename = myfile.getOriginalFilename();
        System.out.println(path);//显示我们的上传路径
        filename=new Date().getTime()+filename;//防止重名
        //4.把上传的文件保存到目标目录
        File target = new File(path + "/" + filename);
        try {
            myfile.transferTo(target);
        }catch (Exception e){
            e.printStackTrace();
        }
        //5.文件上传的路径保存到request对象中
        String headImg="http://localhost:8080/12_7_1/upload/"+filename;
        request.setAttribute("imgsrc",headImg);
        user.setHeadImg(headImg);
        return "success";
    }

}

⑦ 看一下效果

SpringMvc划分细讲（3）

 SpringMvc划分细讲（3）

 1.2 ajax本地上传

① 前端页面

SpringMvc划分细讲（3）

<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2021/12/7
  Time: 9:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
</head>
<body>

<form id="userForm">
      头像:<input type="file" name="myfile"/><br>
      姓名:<input type="text" name="name"/><br>
      性别:<input type="text" name="sex"/><br>
      <input type="button" id="btn" value="提交"/>
</form>

<img id="headImg"/>

<script>
      $("#btn").click(function(){
             var formData = new FormData(document.getElementById("userForm")); //获取表单数据
             $.ajax({
                  url:"${pageContext.request.contextPath}/upload2",
                  type:"post",
                  processData: false,
                  contentType: false,// 设置表单的编码格式为二进制格式。 默认
                  data: formData,
                  success: function(result){
                      if(result.code===2000){
                           $("#headImg").attr("src",result.imgSrc);
                      }
                  },
                  dataType: "json"
             })
      });



</script>
</body>
</html>

 ② 编写controller代码 

SpringMvc划分细讲（3）

 

 

package com.fan.controller;

import com.fan.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.jws.soap.SOAPBinding;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @program: 12.7-1
 * @description:
 * @author: 老范
 * @create: 2021-12-07 16:00
 **/
@Controller
public class UploadController02 {
    @RequestMapping("/upload2")
    @ResponseBody
    public Map<String,Object> upload2(MultipartFile myfile, HttpServletRequest request, User user){
        Map<String,Object>  map = new HashMap<String, Object>();
        //1.获取保存的真实路径
        String path=request.getSession().getServletContext().getRealPath("upload");
        //2.根据真实路径封装文件File对象
        File file = new File(path);
        if (!file.exists()){
            file.mkdirs();
        }
        //3.获取文件的名称
        String filename = myfile.getOriginalFilename();
        System.out.println(path);
        filename = new Date().getTime()+filename;
        //4.文件存放在真实的路径下
        File target = new File(path + "/" + filename);
        try {
            myfile.transferTo(target);//保存
            map.put("code",2000);
            map.put("msg","上传成功");
            map.put("imgSrc","http://localhost:8080/12_7_1/upload/"+filename);
            return map;
        }catch (IOException e){
            e.printStackTrace();
        }
        map.put("code",5000);
        map.put("msg","上传失败");
        return map;
    }
}

③ 看效果（上传本地文件 并回显在当前页面）

 

SpringMvc划分细讲（3）

1.3 普通的上传到oss

①首先我们要先注册一个阿里云账号

② 创建bucket容器

SpringMvc划分细讲（3）

SpringMvc划分细讲（3）

 ③ 创建案例密匙

SpringMvc划分细讲（3）

 SpringMvc划分细讲（3）

④ 编写代码完成oss文件上传。

查看阿里云的OSS文档。

 SpringMvc划分细讲（3）

 

SpringMvc划分细讲（3）

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>

⑥ 代码（可以直接从阿里云拿）

SpringMvc划分细讲（3）

SpringMvc划分细讲（3）

 

 

① 前端页面

SpringMvc划分细讲（3）

 

<form action="${pageContext.request.contextPath}/upload3" method="post" enctype="multipart/form-data">
    头像:<input type="file" name="myfile"/><br>
    姓名:<input type="text" name="name"/><br>
    性别:<input type="text" name="sex"/><br>
    <input type="submit" value="提交"/>
</form>

 ② 编写controller代码 

SpringMvc划分细讲（3）

package com.fan.controller;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.fan.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.FileInputStream;
import java.io.InputStream;
import java.util.Date;

/**
 * @program: 12.7-1
 * @description:
 * @author: 老范
 * @create: 2021-12-07 18:44
 **/
@Controller
public class UploadController03 {
    @RequestMapping("/upload3")
    public String upload3(MultipartFile myfile, HttpServletRequest request, User user) {
        try {
            // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
            String endpoint = "oss-cn-hangzhou.aliyuncs.com";
            // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
            String accessKeyId = "LTAI5tQzKvkaMivngJuj4rNa";
            String accessKeySecret = "OcfElxg7m42WdtI0mF8EFmw4uwiTvl";

            // 创建OSSClient实例。
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

            // 填写本地文件的完整路径。如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
            InputStream inputStream = myfile.getInputStream();
            //获取上传文件名
            String filename= myfile.getOriginalFilename();
            filename=new Date().getTime()+filename;
// 依次填写Bucket名称（例如examplebucket）和Object完整路径（例如exampledir/exampleobject.txt）。Object完整路径中不能包含Bucket名称。
            ossClient.putObject("it-laofan", filename, inputStream);

// 关闭OSSClient。
            ossClient.shutdown();
            String url="http://it-laofan."+endpoint+"/"+filename;
            request.setAttribute("imgsrc",url);
        }catch (Exception e){
            e.printStackTrace();
        }
        return "success";
    }
}

 ③ 看效果 （和第一种差不多，会跳转到另一个界面），然后会上传到我们的oss

SpringMvc划分细讲（3）

SpringMvc划分细讲（3）

 

 1.4 ajax上传到oss服务器

① 前端页面

SpringMvc划分细讲（3）

<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2021/12/7
  Time: 9:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
</head>
<body>

<form id="userForm">
      头像:<input type="file" name="myfile"/><br>
      姓名:<input type="text" name="name"/><br>
      性别:<input type="text" name="sex"/><br>
      <input type="button" id="btn" value="提交"/>
</form>

<img id="headImg"/>

<script>
      $("#btn").click(function(){
             var formData = new FormData(document.getElementById("userForm")); //获取表单数据
             $.ajax({
                  url:"${pageContext.request.contextPath}/upload4",
                  type:"post",
                  processData: false,
                  contentType: false,// 设置表单的编码格式为二进制格式。 默认
                  data: formData,
                  success: function(result){
                      if(result.code===2000){
                           $("#headImg").attr("src",result.imgSrc);
                      }
                  },
                  dataType: "json"
             })
      });



</script>
</body>
</html>

  ② 编写controller代码 

SpringMvc划分细讲（3）

package com.fan.controller;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.fan.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.InputStream;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @program: 12.7-1
 * @description:
 * @author: 老范
 * @create: 2021-12-07 19:01
 **/
@Controller
public class UploadController04 {
    @RequestMapping("/upload4")
    @ResponseBody
    public Map<String,Object> upload2(MultipartFile myfile, HttpServletRequest request, User user){
        Map<String,Object>  map = new HashMap<String, Object>();
    try {
        // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "LTAI5tQzKvkaMivngJuj4rNa";
        String accessKeySecret = "OcfElxg7m42WdtI0mF8EFmw4uwiTvl";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 填写本地文件的完整路径。如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        InputStream inputStream = myfile.getInputStream();
        //获取上传文件名
        String filename= myfile.getOriginalFilename();
        filename=new Date().getTime()+filename;
// 依次填写Bucket名称（例如examplebucket）和Object完整路径（例如exampledir/exampleobject.txt）。Object完整路径中不能包含Bucket名称。
        ossClient.putObject("it-laofan", filename, inputStream);

// 关闭OSSClient。
        ossClient.shutdown();
        String url="http://it-laofan."+endpoint+"/"+filename;
        map.put("code",2000);
        map.put("msg","上传成功");
        map.put("imgSrc",url);
        return map;
    }catch (Exception e){
        e.printStackTrace();
    }
        map.put("code",5000);
        map.put("msg","上传失败");
        return map;
}
}

 ③ 运行看效果（在本页面回显，并上传到oss） 

SpringMvc划分细讲（3）

SpringMvc划分细讲（3）

 

上一篇：基于C语言封装的工具类库-关于一些文件操作和图片操作


下一篇：Content-Disposition 响应头，设置文件在浏览器打开还是下载(pdf文件在浏览器预览功能)图片预览功能浏览器下载功能