springMVC框架---上传文件

最新推荐文章于 2024-07-23 22:24:07 发布

Luckydogs3036

最新推荐文章于 2024-07-23 22:24:07 发布

阅读量76

点赞数

文章标签：服务器 vue.js spring mvc

本文链接：https://blog.csdn.net/Luckydogs3036/article/details/125273345

版权

1. 上传到本地服务器。

原理

（1）文件上传的依赖

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

（2）页面创建

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
   <%--
      method: 提交方式 文件上传必须为post提交。
      enctype:默认application/x-www-form-urlencoded 表示提交表单数据
              multipart/form-data:可以包含文件数据

      input的类型必须为file类型，而且必须有name属性
   --%>
   <form method="post" action="upload" enctype="multipart/form-data">
       <input type="file" name="myfile"/>
   </form>
</body>
</html>

（3）在spring MVC上配置文件上传解析器

<!--id的名称必须叫multipartResolver-->
<bean id="multipartResolver"            class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!--这里的单位为字节10M*1024K*1024-->
    <property name="maxUploadSize" value="10485760"/>
</bean>

（4）编写controller层方法

     @RequestMapping("upload")
     public String upload2(MultipartFile file,HttpServletRequest request) throws Exception{
        String path = request.getSession().getServletContext().getRealPath("upload");
        File file1 = new File(path);
        if (!file1.exists()) {
            file1.mkdir();
        }
        //设置文件的名称
        String fileName = UUID.randomUUID().toString().replace("-", "") + file.getOriginalFilename();
        File target = new File(path + "/" + fileName);
        file.transferTo(target);
        return "";
    }

上面的提交方式为同步请求，异步请求方式要返回json格式的数据

    @RequestMapping("upload")
    @ResponseBody
    public CommonResult upload(MultipartFile file, HttpServletRequest request){
        try {
            String path = request.getSession().getServletContext().getRealPath("upload");
            File file1 = new File(path);
            if (!file1.exists()) {
                file1.mkdir();
            }
            //设置文件的名称
            String fileName = UUID.randomUUID().toString().replace("-", "") + file.getOriginalFilename();
            File target = new File(path + "/" + fileName);
            file.transferTo(target);
            String url = "http://localhost:8080/lesson0609_Springmvc/upload/"+fileName;
            return new CommonResult(2000,"上传成功!",url);
        }catch (Exception e){
            e.printStackTrace();
        }
        return new CommonResult(5000,"上传失败!",null);
    }

2. 通过elementui-vue上传到本地服务器。

（1）前端界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入element得css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <!--引入vue得js文件 这个必须在element之前引入-->
    <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/axios.min.js"></script>
    <!--element得js文件-->
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <div id="app">
        <%--action：文件上传的路径--%>
        <el-upload
                class="avatar-uploader"
                action="upload"
                :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 isPNG = file.type === 'image/png';
                   const isLt2M = file.size / 1024 / 1024 < 2;
                   if (!isJPG) {
                       this.$message.error('上传头像图片只能是 JPG 格式!');
                   }
                   if (!isLt2M) {
                       this.$message.error('上传头像图片大小不能超过 2MB!');
                   }
                   return isJPG && isLt2M;
               }
           }
     })
</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>
</html>

（2）创建后端接口

@RequestMapping("upload")
    @ResponseBody
    public Map upload02(MultipartFile file, HttpServletRequest request) {
        try {
            //1.获取上传到服务器的文件夹路径
            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 (Exception e){
            e.printStackTrace();
        }
        Map map=new HashMap();
        map.put("code",5000);
        map.put("msg","上传失败");
        return map;
    }

3. 上传到阿里云OSS服务器。

上传到本地服务器的缺点: 如果搭建集群，导致文件无法在集群中共享。它的解决方法就是把文件专门上传到一个文件服务器上，这些tomcat服务器都操作同一个文件服务器。

使用OSS服务器，需要先去阿里云开启oss服务，并获取阿里云的密钥才可以使用。

使用方法

（1）导入阿里云的OSS依赖

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

（2）编写一个工具类，便于后面的使用

 public static String upload(MultipartFile file){
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "";
        String accessKeySecret = "";
        // 填写Bucket名称，例如examplebucket。
        String bucketName = "";
        //你上传到oss后的名字 会根据日期帮你创建文件夹。
        String objectName =fileName(file);
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
 
        try {
            InputStream inputStream =file.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception oe) {
 
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        String url="https://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }
    private static String fileName(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;
    }

（3）编写controller层方法

同步请求代码变为：

    @RequestMapping("upload02")
    public String upload02(MultipartFile file){
        OSSUtils.upload(file);
        return "";
    }

异步请求的代码变为

    @RequestMapping("upload")
    @ResponseBody
    public CommonResult upload03(MultipartFile file){
        try {
            String url = OSSUtils.upload(file);
            return new CommonResult(2000, "上传成功！", url);
        }catch (Exception e){
            e.printStackTrace();
        }
        return new CommonResult(5000, "上传成功！", null);
    }