前端上传文件

单文件上传

后端以springboot为例
接口：http://localhost:8080/upload

    @RequestMapping("upload")
    public String upload(MultipartFile file){
        System.out.println(file.getOriginalFilename());
        System.out.println(file);
        return "已经接收到";
    }

form表单

重点：

1. 必须是post请求
2. enctype必须是"multipart/form-data"，表示以二进制形式上传

<form action="http://localhost:8080/upload" method="post" enctype="multipart/form-data">
	<input type="file" name="file">
	<input type="submit" value="提交">
</form>

FormData

FromData对象的使用：

1. 用一些键值对来模拟一系列表单控件：即把form中所有的元素的name与value组成一个queryString。

2. 异步上传二进制文件。

原生js：

<form>
	<input type="file" name="file">
</form>
	<button id="btn">click</button>
<script>
    var form = document.querySelector('form');
    var btn = document.querySelector('#btn')
    btn.onclick = function(){
       // 将普通的html表单转换为表单对象
       var formData = new FormData(form);
       // 创建ajax对象
       var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
       xhr.open('post', 'http://localhost:8080/upload');
            // 发送ajax请求
       xhr.send(formData);
            // 监听xhr对象下面的onload事件
       xhr.onload = function () {
                // 对象http状态码进行判断
          if (xhr.status == 200) {
               console.log(xhr.responseText);
            }
        }
     }
</script>

成功接收

ajax：

    <form>
        <input type="file" name="file">
    </form>
    <button id="btn">click</button>
    <script>
        var form = document.querySelector('form');
        var btn = document.querySelector('#btn')
        btn.onclick = function(){
            let form_data = new FormData(form);
            $.ajax({
                type:'post',
                url:'http://localhost:8080/upload',
                data:form_data,
                contentType:false,
                processData:false,
            })
        }
    </script>

一定要加上 contentType:false,processData:false，不加或者少加一个就会报错。

contentType:false,  //不处理发送的数据
 processData:false,  //不设置Content-Type请求头

多文件上传

方法与单文件上传相同，需要在input标签上添加一个 multiple 属性就可以选择多个文件，前端代码与单文件上传相同，只需要修改后端的接收代码就可以了。

    @RequestMapping("upload")
    public String upload(MultipartFile file[]) throws IOException {
        System.out.println(file);
        for (MultipartFile f:file
             ) {
            System.out.println(f);
        }
        return "已经接收到";
    }

多文件上传时，后端接收的参数应该是一个文件数组。