elementui+vue+axios完成文件上传本地服务器

最新推荐文章于 2024-04-22 20:11:02 发布

阿磊学不会001

最新推荐文章于 2024-04-22 20:11:02 发布

阅读量402

点赞数

分类专栏： java vue 文章标签： vue java

本文链接：https://blog.youkuaiyun.com/qq_53625788/article/details/125218301

版权

本文介绍如何利用ElementUI组件库结合Vue.js和axios实现文件上传到本地服务器的流程，包括理解文件上传原理，配置依赖，创建前端页面，设置Spring MVC的文件上传解析器，以及编写后台接口。

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

1.文件上传到本地服务器。

1.1 文件上传的原理

加入文件上传的依赖

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

创建一个web页面

<%--
  Created by IntelliJ IDEA.
  User: 王磊
  Date: 2022/6/9
  Time: 19:19
  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 可以包含文件数据
            file 文件
            input的类型必须为 file 类型  而且必须有name 属性
--%>
<form method="post" action="upload01" enctype="multipart/form-data">
    <input type="file" name="myfile"/><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

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

 <!--
     id的名称必须叫multipartResolver
     -->
     <bean id="multipartResolver" class="org.springframework.web.multipa

最低0.47元/天解锁文章