文件上传的原理

糖炒&栗子

已于 2022-06-13 08:46:04 修改

阅读量6.7k

点赞数 4

分类专栏： java 文章标签： vue.js 前端 javascript

于 2022-06-13 00:31:37 首次发布

本文链接：https://blog.csdn.net/m0_64372028/article/details/125252220

版权

本文详细介绍了文件上传的原理，包括前端表单提交、本地服务器上传，以及使用ElementUI和Vue.js结合axios实现文件上传。重点讲解了如何将文件上传到阿里云OSS服务器，包括申请服务、界面操作和使用阿里云密钥。同时，文中提到了使用SpringMVC配置文件上传解析器，并阐述了文件服务器在集群环境中的重要性。

摘要由CSDN通过智能技术生成

1.文件上传原理分析

（1）文件上传方式有很多，但底层的实现都是文件的读写操作（I/O读写）

文件上传的必要前提
1）提供form表单、method必须是post
2） form表单的entype必须是multipart/form-data
3）提供input type=“file”类的上传输入域

（2）文件上传到本地服务器的缺点：

1. 当服务器重启，本地服务的文件没了

2. 搭建服务器集群：A服务器1000， B服务器.........
客户第一次上传时访问的是A服务器。
客户第二次访问文件，访问的是B服务器

（3）如何解决本地服务器上传的缺点:

（1）自己搭建一个文件服务器；不会重启，维护

（2）使用第三方的文件服务器

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

（1）因为文件上传的依赖

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

(2) 创建一个页面

<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"/>
   </form>
</body>
</html>

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

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

          <!--这里的单位为字节10M*1024K*1024-->
          <property name="maxUploadSize" value="10485760"/>
     </bean>

(4)创建upload1接口方法

 @RequestMapping("/upload1")
    public String upload01(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); //把myfile转移到目标目录下
        return "";
    }

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

(1)jsp页面的布局

<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/j