文件上传的多种形式

于 2021-12-09 20:30:46 发布
阅读量6.1k 收藏 22
点赞数 3
分类专栏： Java 服务器 Ajax 文章标签： 服务器 javascript 前端 java jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_62776175/article/details/121840761
版权

目录

回顾

一、正文

二、普通文件上传

1、 那么上传文件有什么条件呢：

2、前端页面

3、完成文件上传:---借助第三方jar完成。 commons-fileupload

4、配置文件上传解析器:

5、控制层代码

三、ajax本地上传

1、前端

 2、后台代码

四、上传到OSS服务器

1、准备好上一篇创建的密钥，并进入阿里云的官网

 2、前端

3、后端

4、自己的Bucket所在地域对应的Endpoint获取

五、通过ajax完成上传到OSS

1、前端

 2、后台

回顾

上一篇介绍了OSS的注册，这一篇会介绍如何用代码上传文件，开始进入正文啦

一、正文

文件上传：

1.普通本地文件上传

2.Ajax本地上传

3.远程上传OSS

二、普通文件上传

先来思考一下我们文件上传，上传到了什么位置？

答案 是上传到服务器或者你的目录中

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完成。 commons-fileupload

 

<!--①文件上传的依赖-->
<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
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";
    }
}

三、ajax本地上传

1、前端

jQuery可以去官网下载

<%@ 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="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、后台代码

 

@Controller
public class Uploadcontroller2 {

    @RequestMapping("/upload2")//upload2
    @ResponseBody
    public Map<String,Object> upload2(MultipartFile[] myfile, HttpServletRequest request, User user){

        Map<String,Object> map=new HashMap<String, Object>();
        //获取文件保存的真实路径
        String path = request.getSession().getServletContext().getRealPath("upload");
        //根据真实路径封装文件File对象
        File file = new File(path);
        if(!file.exists()){
            file.mkdirs();
        }
        for (int i = 0; i < myfile.length; i++) {
            //进行获取文件的名称
            String filename = myfile[i].getOriginalFilename();
            filename= new Date().getTime()+filename;

            //文件存放在真实路径下
            File target = new File(path+"/"+filename);
            try {
                myfile[i].transferTo(target);//保存
                map.put("code",2000);
                map.put("msg","上传成功");
                map.put("imgsrc","http://localhost:8080/File01/upload/"+filename);
                return map;
            } catch (IOException e) {
                e.printStackTrace();
            }
            map.put("code",5000);
            map.put("msg","上传失败");
            return map;
        }
       return map;
    }
}

四、上传到OSS服务器

1、准备好上一篇创建的密钥，并进入阿里云的官网

 点击产品文档

 然后点击SDK实例，后选择Java

 进去后点击上传文件后选择简单上传，找到上传文件流

 2、前端

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

3、后端

 

@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 = "你自己Bucket所在地域对应的Endpoint";
            // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
            String accessKeyId = "输入你的密钥ID";
            String accessKeySecret = "输入你的KeySecret";

            // 创建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("gp1124", filename, inputStream);
            // 关闭OSSClient。
            ossClient.shutdown();
            //https://gp1124.oss-cn-hangzhou.aliyuncs.com/16388756241465C02308612D3195CDA2FE7B719039CB4.jpg
            String url="https://Bucket名称."+endpoint+"/"+filename;
            request.setAttribute("imgsrc",url);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "success";

    }

}

4、自己的Bucket所在地域对应的Endpoint获取

点击管理控制台

点击自己

 然后点击概览复制自己所在地域对应的Endpoint

然后粘贴到上面的代码块相应的位置

五、通过ajax完成上传到OSS

1、前端

<%@ 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、后台

@Controller
public class Uploadcontroller4 {

    @RequestMapping("/upload4")//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 = "你自己Bucket所在地域对应的Endpoint";
            // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
            String accessKeyId = "输入你的密钥ID";
            String accessKeySecret = "输入你的KeySecre";

            // 创建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("gp1124", filename, inputStream);
            // 关闭OSSClient。
            ossClient.shutdown();
            //https://gp1124.oss-cn-hangzhou.aliyuncs.com/16388756241465C02308612D3195CDA2FE7B719039CB4.jpg
            String url="https://Bucket名称."+endpoint+"/"+filename;
            map.put("code",2000);
            map.put("msg","上传成功");
            map.put("imgsrc",url);
            return map;
        } catch (IOException e) {
            e.printStackTrace();
        }
        map.put("code",5000);
        map.put("msg","上传失败");
        return map;
    }
}

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值