springmvc的文件上传

最新推荐文章于 2025-03-25 10:24:05 发布

塘枫蒲

最新推荐文章于 2025-03-25 10:24:05 发布

阅读量363

点赞数

文章标签： java 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_53997529/article/details/125254464

版权

本文介绍了使用SpringMVC进行普通文件上传至本地服务器，结合ElementUI、Vue和Axios实现文件上传，以及将文件上传至阿里云OSS服务器的详细步骤，包括前端页面创建、接口设计和运行效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.springmvc的普通文件上传

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

3.普通文件上传到OSS文件服务器

4.elementui异步上传到OSS文件服务器

5.创建一个前端页面，保存用户信息--头像

1.springmvc的普通文件上传

注：文件上传到了本地服务器

（1）引入依赖

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

（2）在webapp下建一个upload1.jsp

<%--
        method:提交方式 文件上传必须为post提交
        enctype：默认application/x-www-form-urlencoded 表示提交表单数据
                multipart/form-data 可以包含文件数据

        input的类型必须为file类型，而且必须有name属性
    --%>
<form method="post" action="upload1" enctype="multipart/form-data">
    <input type="file" name="myFile"/><br>
    <input type="submit" value="提交"/>

（3）运行tomcat，结果如下：

（4）创建upload2接口方法

@Controller
public class UploadController {
    @RequestMapping("/upload2")
    @ResponseBody
    //MultipartFile参数名必须和<input type="file" name="myFile"/>中的name属性相同
    public String upload2(MultipartFile myFile,HttpServletRequest request) throws IOException {
        //1.得到本地服务目录的地址
        String path = request.getSession().getServletContext().getRealPath("upload");
        //2.判断该目录是否存在,不存在就创建该目录
        File file=new File(path );
        if (!file.exists()){
            file.mkdirs();
        }
        //3.把myFile保存到本地服务中某个文件夹下
        String filename=UUID.randomUUID().toString().replace("-","")+myFile.getOriginalFilename();
        File target=new File(path+"/"+filename);
        //把myFile转移到目标目录下
        myFile.transferTo(target);
        return "";
    }
 }

运行结果：会保存到本地服务中自己设置的目录下

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

（1）elementui的前端页面，命名为：upload.jsp

<%--
  Created by IntelliJ IDEA.
  User: 86151
  Date: 2022/6/9
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%@ 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）创建upload接口方法

@Controller
public class UploadController {
    @RequestMapping("/upload")
    @ResponseBody
    public Map upload(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文件服务器

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

<!--引入阿里云依赖-->
    <dependency>
      <groupId>com.aliyun.oss</groupId>
      <artifactId>aliyun-sdk-oss</artifactId>
      <version>3.10.2</version>
    </dependency>

（2）在controller层创建UploadController1类，从阿里云的OSS文件服务器引入代码

@Controller
public class UploadController1 {
    @RequestMapping("/upload1")
    public String upload1(MultipartFile myFile, HttpServletRequest request){
            // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
            String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
            // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "yourAccessKeyId";
        String accessKeySecret = "yourAccessKeySecret";
            // 填写Bucket名称，例如examplebucket。
            String bucketName = "cmw666";
            // 填写Object完整路径，完整路径中不能包含Bucket名称，上传到oss后的名字
            String objectName = "picture.jpg";
            // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
            // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
            String filePath= "C:\\Users\\86151\\Pictures\\Saved Pictures\\2.jpg";

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

            try {
                InputStream inputStream =myFile.getInputStream();
                // 创建PutObject请求。
                ossClient.putObject(bucketName, objectName, inputStream);
            } catch (OSSException oe) {

            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } finally {
                if (ossClient != null) {
                    ossClient.shutdown();
                }
            }
        }
         String url="https://"+bucketName+"."+endpoint+"/"+objectName;
        request.setAttribute("imgUrl",url);
        return "success.jsp";
    }

（3）创建upload1.jsp，普通文件提交

<%@ 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="/upload1" enctype="multipart/form-data">
    <input type="file" name="myFile"/><br>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

（4）运行upload1.jsp，运行成功后，选择图片跳转到success.jsp：

success.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
你成功了！
<img src="${imgUrl}"/>
</body>
</html>

4.elementui异步上传到OSS文件服务器

（1）前端页面，upload.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 86151
  Date: 2022/6/10
  Time: 13:51
  To change this template use File | Settings | File Templates.
--%>
<%@ 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">
    <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 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）封装到工具中，创建OSSUtil类：

package com.cmw.util;

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

import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;

/**
 * @Author 86151
 * @Create 2022/6/10 - 20:29
 */
public class OSSUtil {
    public static String upload(MultipartFile myFile){
        // 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 = "cmw666";
        // 填写Object完整路径，完整路径中不能包含Bucket名称，上传到oss后的名字,根据日期带你创建文件夹
        String objectName =filename(myFile);
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            InputStream inputStream = myFile.getInputStream();
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
        }catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        String url="https://"+bucketName+"."+endpoint+"/"+objectName;
        return url;
    }

    //获取上传到oss后的名字
    public 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接口并建一个公共类CommonResult类

CommonResult类：

package com.cmw.util;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @Author 86151
 * @Create 2022/6/10 - 20:48
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class CommonResult {
    private Integer code;
    private String msg;
    private Object data;
}

controller接口：

package com.cmw.controller;
import com.cmw.util.CommonResult;
import com.cmw.util.OSSUtil;
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;
/**
 * @Author 86151
 * @Create 2022/6/10 - 15:49
 */
@Controller
public class UploadController1 {
    @RequestMapping("upload2")
    @ResponseBody
    public CommonResult upload2(MultipartFile file){
        try {
            String url = OSSUtil.upload(file);
            return new CommonResult(2000,"上传成功",url);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new CommonResult(5000,"上传失败",null);
    }
}

(4)运行结果：

5.创建一个前端页面，保存用户信息--头像

（1）.创建一个前端页面，avatar.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 86151
  Date: 2022/6/10
  Time: 22:22
  To change this template use File | Settings | File Templates.
--%>
<%@ 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">
    <el-form  label-width="80px" :model="userForm">
        <el-form-item label="头像：">
            <el-upload
                    class="avatar-uploader"
                    action="avatarUpload"
                    :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:{
            imageUrl:"",
            userForm:{},
        },
        methods:{
            //提交
            onSubmit(){
              axios.post("submitUser",this.userForm).then(function (result){
              })
            },
            //上传成功后的方法
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                //为表单对象添加头像地址的属性
                this.userForm.avatarUrl=this.imageUrl;
            },
            //上传前触发的方法
            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>
<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）创建一个UserController接口

package com.cmw.controller;

import com.cmw.entity.User;
import com.cmw.util.CommonResult;
import com.cmw.util.OSSUtil;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

/**
 * @Author 86151
 * @Create 2022/6/10 - 22:25
 */
//@RestController相当于 @Controller + @ResponseBody
@RestController
public class UserController {
    @RequestMapping("avatarUpload")
    public CommonResult avatarUpload(MultipartFile file){
        try {
            String avatar= OSSUtil.upload(file);
            return new CommonResult(2000,"上传成功",avatar);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new CommonResult(5000,"上传失败",null);
    }

    //@RequestBody:把请求体中的json数据转换为java对象
    @PostMapping("submitUser")
    public CommonResult submitUser(@RequestBody User user){
        System.out.println(user);
        return new CommonResult(2000,"上传成功",null);
    }
}

（3）在avatar.jsp运行，结果如下图所示：