springmvc-文件上传

小白N+1

已于 2022-06-12 18:46:47 修改

阅读量625

点赞数 1

文章标签： java

于 2022-06-09 20:26:50 首次发布

本文链接：https://blog.csdn.net/weixin_68507438/article/details/125209748

版权

1. 文件上传的原理

2. 文件上传到本地服务器

（1）导入文件上传的jar包-commons-fileupload

  <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>

(2) 创建jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <!--method必须是post,input类型必须是file,必须要有name属性-->
    <form method="post" action="upload" enctype="multipart/form-data">
        <input type="file" name="myfile"/><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

（3）在springmvc.xml中配置文件上传解析器

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10485760"/>
    </bean>

(4)创建upload01接口方法

@Controller
public class UploadController {
    @RequestMapping("/upload")
    public String upload(MultipartFile myfile, HttpServletRequest request) throws Exception{
        String path = request.getSession().getServletContext().getRealPath("upload");
        System.out.println(path); //上传文件的本地路径
         //新建文件夹
        File file=new File(path);
        //检测。如果文件不存在，将会创建一个文件
        if(!file.exists()){
            file.mkdirs();
        }
           //生成随机的字符串
           //replace:替换
        String fileName = UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        File target = new File(path+"/"+fileName);
        myfile.transferTo(target);
        return "";
    }

}

3. elementui+vue+axios完成文件上传

(1)页面的布局

<%--
  Created by IntelliJ IDEA.
  User: xu
  Date: 2022/6/9
  Time: 18:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-upload
                class="avatar-uploader"
                action="upload02"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</body>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imageUrl:"",
            },
            methods:{
                handleAvatarSuccess(res, file) {
                    this.imageUrl = res.data;
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                }
            }
        })
    </script>
</html>

(2)后端的页面

@RequestMapping("/upload02")
    //输出JSon格式
    @ResponseBody
    //MultipartFile file:前端页面默认的name为file
    public Map upload02(MultipartFile file, HttpServletRequest request){
        try {
            String path = request.getSession().getServletContext().getRealPath("upload");
            File file1=new File(path);
            if(!file1.exists()){
                file1.mkdirs();
            }
            String fileName=UUID.randomUUID().toString().replace("-","")
                    +file.getOriginalFilename();
            File target = new File(path+"/"+fileName);
            file.transferTo(target);
            Map map=new HashMap();
            map.put("code",2000);
            map.put("msg","上传成功");
            //路径为服务器的路径
            map.put("data","http://localhost:8080/upload/"+fileName);
            return map;
        } catch (IOException e) {
            e.printStackTrace();
        }
        Map map=new HashMap();
        map.put("code",5000);
        map.put("msg","上传失败");
        return map;
    }

3.本地文件上传到OOS

如何使用OOS？

此处使用的是阿里云的OOS

（1）注册阿里云的账户

（2）

（3）图片中的文档能够查询如何使用OOS

（4）

（5）（6）导入依赖

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

（7）

public class OssUtil {
    public static String upload(MultipartFile myfile) throws Exception{
         Endpoint以华东1（杭州）为例，其它Region请按实际情况填写
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        //阿里云密钥账号
        String accessKeyId = "yourAccessKeyId";
         //阿里云密钥密码
        String accessKeySecret = "yourAccessKeySecret";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "xusl";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。

        String objectName =filName(myfile);
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        //String filePath= "D:\\鼠标指针\\1.jpg";

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

        try {
            InputStream inputStream =myfile.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
//        String url = "https://"+bucketName+"."+endpoint+"/"+objectName;
//        request.setAttribute("imgUrl",url);
        //https://xusl.oss-cn-hangzhou.aliyuncs.com/bz.jpg
        String url="https://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }

    private  static String filName(MultipartFile myfile){
        Calendar calendar=Calendar.getInstance();
        String name= calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MONTH)+1)+"/"+calendar.get(Calendar.DATE)+"/"
                + UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        return name;
    }
}

4.使用element-ui+vue+OOS上传文件

（1）前端页面

<%--
  Created by IntelliJ IDEA.
  User: xu
  Date: 2022/6/12
  Time: 16:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-form  label-width="80px" :model="userForm">
            <el-form-item label="头像:">
                <el-upload
                        class="avatar-uploader"
                        action="uploadAvatar"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="账号:">
                <el-input v-model="userForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
                <el-input v-model="userForm.pwd"></el-input>
            </el-form-item>
            <el-form-item label="地址:">
                <el-input v-model="userForm.address"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            userForm:{},
            imageUrl:""
        },
        methods:{
            handleAvatarSuccess(result,file){
                this.imageUrl=result.data;
                //为表单对象添加头像地址的属性
                this.userForm.avatarUrl=this.imageUrl;
            },
            //提交
            onSubmit(){
                axios.post("addUser",this.userForm).then(function(result){
                    console.log(result)
                });
            },
            //上传前触发的方法
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    })
</script>
</html>

（2）Controller层代码

package com.xsl.controller;

import com.xsl.entity.User;
import com.xsl.util.CommonResult;
import com.xsl.util.OssUtil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

//@Controller
@RestController
public class Upload03 {
    @RequestMapping("uploadAvatar")
    @ResponseBody
    public CommonResult uploadAvatar(MultipartFile file){
        try {
            String avatar = OssUtil.upload(file);
            return new CommonResult(2000,"上传成功",avatar);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new CommonResult(5000,"上传失败",null);
    }

    @PostMapping("addUser")
    //@RequestMapping("addUser")
    @ResponseBody
    public CommonResult addUser(@RequestBody User user){
        System.out.println(user);

        return new CommonResult(2000,"上传成功",null);
    }
}

（3）utils层代码

封装的OOS类

package com.xsl.util;

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;

public class OssUtil {
    public static String upload(MultipartFile myfile) throws Exception{
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "LTAI5tHqTysVnNH81TYcY2yd";
        String accessKeySecret = "mU28irg6XMfzsvHzCSUGh1HSeHNAd2";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "xusl";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。

        String objectName =filName(myfile);
        // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        //String filePath= "D:\\鼠标指针\\1.jpg";

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

        try {
            InputStream inputStream =myfile.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
//        String url = "https://"+bucketName+"."+endpoint+"/"+objectName;
//        request.setAttribute("imgUrl",url);
        //https://xusl.oss-cn-hangzhou.aliyuncs.com/bz.jpg
        String url="https://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }

    private  static String filName(MultipartFile myfile){
        Calendar calendar=Calendar.getInstance();
        String name= calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MONTH)+1)+"/"+calendar.get(Calendar.DATE)+"/"
                + UUID.randomUUID().toString().replace("-","")+myfile.getOriginalFilename();
        return name;
    }
}