通过elementui-vue上传文件到本地服务器

原创已于 2022-06-13 08:43:31 修改 · 3.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2022-06-10 10:17:37 首次发布

这篇博客介绍了文件上传的基本原理，并详细讲解了如何使用elementui、vue和axios将文件上传到本地服务器，以及如何在阿里云OSS上进行文件上传的操作，包括申请OSS服务、创建bucket和使用Java代码上传文件。

1.文件上传原理

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

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

1.文件上传原理

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

(1)引入文件上传的依赖

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

(2)创建一个页面

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/6/10
  Time: 8:40
  To change this template use File | Settings | File Templates.
--%>
<%@ 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="upload01" enctype="multipart/form-data">
    <input type="file" name="myfile"/>
    <input type="submit" value="提交"/>
</form>

</body>
</html>

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

<!--
     id的名称必须叫multipartResolver
     -->
<bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver">
        <property name="maxUploadSize" value="10485760"/>
    </bean>

(4)创建upload接口方法

@Controller
public class UploadController {
    @RequestMapping("/upload01")
    public String upload(MultipartFile myfile, HttpServletRequest request) throws Exception{
        //得到本地服务地址
        String path = request.getSession().getServletContext().getRealPath("upload");
        //判断路径是否存在
        File file = new File(path);
        if (file.exists()){
            file.mkdirs();
        }
        //吧myfile保存到本地服务中某个文件夹下
        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: Administrator
  Date: 2022/6/9
  Time: 20:44
  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="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>

<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("/upload02")
    @ResponseBody
    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/springmvc/upload/"+filename);
            return map;
        }catch (Exception e){
            e.printStackTrace();
        }
        Map map = new HashMap();
        map.put("code",5000);
        map.put("msg","上传失败");
        return map;
    }