新手入门springmvc 第三部分

最新推荐文章于 2023-02-16 16:50:48 发布

L.lzl

最新推荐文章于 2023-02-16 16:50:48 发布

阅读量332

点赞数

分类专栏： springmvc 文章标签： jquery springmvc

本文链接：https://blog.csdn.net/weixin_46153254/article/details/121799744

版权

springmvc 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.文件上传

(1)普通本地上传
(2)ajax本地上传。
(3)layui本地上传。自己研究。
(4)远程上传OSS

2.普通本地上传

（1）文件上传条件

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

（2）前端网页

<form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="myfile"/>
      <input type="submit" value="提交"/>
</form>

（3）完成文件上传：借助第三方jar完成

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

（4）配置文件上传解析器

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

（5）controller代码

package com.ykq.controller;

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: springmvc-upload
 * @description:
 * @author: 
 * @create: 2021-12-07 09:21
 **/
@Controller
public class UploadController {

    @RequestMapping("/upload") //springmvc把上传的文件封装到MultipartFile类中。
                               //myfile必须和表单中name名称一致。
    public String upload01(MultipartFile myfile, HttpServletRequest request){
        //获取图片在服务器下的路径。
        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();
        filename=new Date().getTime()+filename; //防止重名。
        //4.把上传的文件保存到目标目录。
        File target=new File(path+"/"+filename);
        try {
            myfile.transferTo(target); //把上传的文件保存到target目录中
        }catch (Exception e){
             e.printStackTrace();
        }
        //文件上传的路径保存到request对象中。 
        request.setAttribute("imgsrc","http://localhost:8080/springmvc_upload/upload/"+filename);
        return "success";
    }
}

3.ajax本地上传

（1）前端

<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 
  Time: 
  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>

（2）后台代码

package com.ykq.controller;

import com.ykq.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.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @program: springmvc-upload
 * @description:
 * @author: 
 * @create: 
 **/
@Controller
public class UploadController2 {
    @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();
        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/springmvc_upload/upload/"+filename);
            return map;
        } catch (IOException e) {
            e.printStackTrace();
        }
        map.put("code",5000);
        map.put("msg","上传失败");
        return map;
    }
}

4.上传到oss服务器

（1）添加oss的依赖

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

（2）代码

（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>

（4）后端

package com.ykq.controller;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.ykq.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: springmvc-upload
 * @description:
 * @author: 
 * @create: 
 **/
@Controller
public class UploadController3 {

    @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 = "LTAI5t8HjAEzWgAt4tuBbswj";
            String accessKeySecret = "GuZzwNjINoVl0ScdInGuKHLrTrDCF2";

          // 创建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("qy145", filename, inputStream);
            // 关闭OSSClient。
            ossClient.shutdown();
            //
//            https://qy145.oss-cn-hangzhou.aliyuncs.com/16388489433231.jpg
            String url="https://qy145."+endpoint+"/"+filename;
            request.setAttribute("imgsrc",url);
        }catch (Exception e){
            e.printStackTrace();
        }
        return "success";
    }
}

5.通过Ajax完成上传到oss上

（1）前端

<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 
  Time:
  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>

（2）后台

package com.ykq.controller;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.ykq.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: springmvc-upload
 * @description:
 * @author: 
 * @create: 
 **/
@Controller
public class UploadController4 {

    @RequestMapping("/upload4")
    @ResponseBody
    public Map<String,Object> upload4(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 = "LTAI5t8HjAEzWgAt4tuBbswj";
            String accessKeySecret = "GuZzwNjINoVl0ScdInGuKHLrTrDCF2";

            // 创建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("qy145", filename, inputStream);
            // 关闭OSSClient。
            ossClient.shutdown();
            //
//            https://qy145.oss-cn-hangzhou.aliyuncs.com/16388489433231.jpg
            String url = "https://qy145." + 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;
    }
}

L.lzl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新手入门springmvc 第三部分

1.文件上传(1)普通本地上传 (2)ajax本地上传。 (3)layui本地上传。自己研究。 (4)远程上传OSS2.普通本地上传（1）文件上传条件1.表单中。2.表单的提交方式method必须是post.3.表单上传的编码必须是二进制。enctype="multipart/form-data"4.input的类型必须file类型。而且该输入框必须有name属性。（2）前端网页<form action="${pageContext.request.c...
复制链接

扫一扫