005-html+js+spring multipart文件上传

一、概述

　　需求：通过html+js+java上传最大500M的文件，需要做MD5 消息摘要以及SHA256签名，文件上传至云存储

1.1、理解http协议

　　https://www.cnblogs.com/bjlhx/category/1198166.html

　　http传输的都是二进制数据，可以看成传输的都是字符。

　　http协议其实就是对socket接受到的数据进行解析，或者将按照http协议的格式把数据写到socket中

　　HTTP文件上传是做Web开发时的常见功能，例如上传图片、上传影片等。实现HTTP文件上传也比较简单，用任何Web端的脚本都可以轻松实现，例如PHP、JSP都有现成的函数或者类来调用。

　　经过分析后发现，原来PHP、JAVA的上传是先由服务器缓存为临时文件，或者服务器将上传数据缓存到内存中后，再由脚本调用相关的上传文件处理函数来移动临时文件来保存文件数据；由于PHP、JAVA等处理文件上传需要分两步，对于大文件与超大文件来说，再次移动文件也是比较耗时间与系统资源的，由于浏览器将文件提交到服务器上后就会等待服务器端的响应，服务器端移动文件耗时太长，导致浏览器等待超时而报错。

1.2、HTTP文件上传的技术原理

　　HTTP文件上传是通过 multipart/form-data 协议实现的，multipart/form-data实际上是一种数据的编码分割方式，例如在浏览器端编写一个文件上传的页面，向服务器发送POST请求后，服务器端将会收到数据。

　　multipart/form-data需要首先在HTTP请求头设置一个分隔符，例如：WebKitFormBoundarydCC44akR5BzKXSP1：参看请求头数据

　　然后，将每个字段用“--分隔符”分隔，最后一个“--分隔符--”表示结束。

　　例如，要上传一个name字段"Today"和一个文件11.gif,HTTP正文可以通过Chrome浏览器开发者工具查看【F12】，目前我使用的没有展示Request Payload ,可以使用wireshark抓包查看

1.2.1、wireshark 配置抓包：tcp.port eq 8080

打开网站

　　 005-html+js+spring multipart文件上传

点击上传文件按钮

　　 005-html+js+spring multipart文件上传

分析

　　1、三次握手建立tcp链接：57行，客户端发送syc，58行服务端回复syc和ack，59行客户端回复ack，其中60行 TCP Window Update：滑动窗口为0后，发送方停止发送数据，如果接收方滑动窗口出现空闲空间，则接收方主动发送TCP Window Update来更新发送方的滑动窗口。

　　2、数据传输：61行，Push+ACK包：数据包协议+ACK包，这样是为了减少网络流量；62行，服务器端返回ack，63行，具体数据传输，以及ack，后续就是没三行一次的循环上传数据　　　

1.2.2、配置查看 TCP 流

　　 005-html+js+spring multipart文件上传

查看整个请求响应过程【文件流删除大部分内容】

POST /manage/uploadFile HTTP/1.1
Host: zs.jd.com:8080
Connection: keep-alive
Content-Length: 335334
Cache-Control: max-age=0
Origin: http://zs.jd.com:8080
Upgrade-Insecure-Requests: 1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywcj3RACSzuBGHt5g
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Referer: http://zs.jd.com:8080/file.html
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

------WebKitFormBoundarywcj3RACSzuBGHt5g
Content-Disposition: form-data; name="name"

sss
------WebKitFormBoundarywcj3RACSzuBGHt5g
Content-Disposition: form-data; name="file"; filename="11.gif"
Content-Type: image/gif

GIF89a+...w..!..NETSCAPE2.0.......=;.@.;
------WebKitFormBoundarywcj3RACSzuBGHt5g--

HTTP/1.1 200 
Transfer-Encoding: chunked
Date: Thu, 06 Jun 2019 02:24:05 GMT

0

GET /favicon.ico HTTP/1.1
Host: zs.jd.com:8080
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://zs.jd.com:8080/manage/uploadFile
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

HTTP/1.1 200 
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Content-Length: 0
Date: Thu, 06 Jun 2019 02:24:05 GMT

二、代码开发

2.1、jar配置

POM jar

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.5</version>
        </dependency>

因为使用springboot，配置基础参数

spring.http.multipart.max-file-size=500MB
spring.http.multipart.max-request-size=500MB

代码类：只要是Spring 生态的应用程序，文件的接收都是使用MutipartFile这个类型，它表示通过 mutipart 请求上传了的一个文件。如果多个文件上传，那就用数组，如 MutipartFile[] 。

2.2、基本上传

html

<form enctype="multipart/form-data"
      action="/bs/test/uploadFile/cloud" method="post">

    姓名：<input type="text"  name="name">
    上传文件： <input type="file" name="file" />
<br/>
    <input type="submit" value="上传"/>
</form>

java代码

util方法

import java.io.*;
import java.security.MessageDigest;

import org.apache.commons.codec.binary.Hex;

public class CommonHelper {

    public static String msgSafeBase(String msg, String algorithmName) throws Exception {
        return msgSafeBase(msg.getBytes("UTF8"), algorithmName);
    }

    public static String msgSafeBase(byte[] data, String algorithmName) throws Exception {
        MessageDigest m = MessageDigest.getInstance(algorithmName);
        m.update(data);
        byte s[] = m.digest();
        return Hex.encodeHexString(s);
    }

    public static String msgSafeBase(InputStream inputStream, String algorithmName) throws Exception {
        MessageDigest m = MessageDigest.getInstance(algorithmName);

        //分多次将一个文件读入，对于大型文件而言，比较推荐这种方式，占用内存比较少。
        byte[] buffer = new byte[1024];
        int length = -1;
        while ((length = inputStream.read(buffer, 0, 1024)) != -1) {
            m.update(buffer, 0, length);
        }
        inputStream.close();

        byte s[] = m.digest();
        return Hex.encodeHexString(s);
    }


    public static String msgSafeBaseMD5(byte[] data) throws Exception {
        return msgSafeBase(data, "MD5");
    }

    public static String msgSafeBaseMD5(InputStream inputStream) throws Exception {
        return msgSafeBase(inputStream, "MD5");
    }

    public static String msgSafeBaseSHA256(byte[] data) throws Exception {
        return msgSafeBase(data, "SHA-256");
    }

    public static String msgSafeBaseSHA256(InputStream inputStream) throws Exception {
        return msgSafeBase(inputStream, "SHA-256");
    }
}

View Code