多文件上传前后端实现

最新推荐文章于 2024-09-01 20:10:36 发布

童言无忌_c

最新推荐文章于 2024-09-01 20:10:36 发布

阅读量5.3k

点赞数 6

文章标签：前端 javascript vue.js java

本文链接：https://blog.csdn.net/weixin_44008416/article/details/122440150

版权

前端

前端如果要传递文件给后端，一般都是通过formData的形式传递。在以前后端处理路由的时候可以直接使用form表单去提交数据。在现在前后端分离的情况，我们都需要手动模拟表单提交的数据然后传递到后端。

formData添加数据有两种方法，append方法和set方法
append方法添加数据如果数据存在不会覆盖会添加一个相同key的数据
set方法如果数据存在就会直接覆盖原有的
传递多个file文件的关键就是使用append方法去添加相同key的file文件。相同的key的file文件，后端可以用一个数组去接收

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>传统form表单提交</p>
    <form id="form" method="post" enctype="multipart/form-data" action="">
        <input type="file" name="files" id="f" multiple>
        <input type="submit" value="提交">
    </form>
    <button id="submit">提交</button>
    <hr>
    <input type="file" name="file" id="file" multiple>

    <script>
        /* 表单提交 */
        const btn = document.querySelector('#submit');
        const form = document.querySelector('#form');
        btn.addEventListener('click', () => {
            const formData = new FormData(form);
            formData.set('id', 123)
            axios.request({
                url: 'http://localhost:11111/api/multi/uploadMultiImage',
                method: 'post',
                data: formData
             }).then(res => {
                console.log(res)
                form.reset()
            })
        })
        /* 表单提交 */

        const file = document.querySelector('#file');
		// 在file框改变时去提交文件
        file.addEventListener('change', (e) => {
            const files = e.target.files;
            const formData = new FormData();
            // 多文件上传的关键就是需要在formData中append相同名称的file文件，不能直接传递fileList
            // formData的append方法会追加相同的数据，不会覆盖原有的数据
            // formData的set方法是直接覆盖
            files.forEach(file => formData.append('files', file))
            // 如果要传递file文件，请求头需要设置 Content-Type: multipart/form-data
			// fetch方法会自动识别formData的数据，不需要设置headers的Content-Type
            fetch('http://localhost:11111/api/multi/uploadMultiImage', {
                method: 'post',
                body: formData
            }).then(res => res.json()).then(data => {
                console.log(data)
            })
        })
    </script>
</body>

</html>

java后端

@RequestMapping("multi")
publish Main class {

	@PostMapping("uploadMultiImage")
	publish String uploadMultiImage(@RequestParam("files") MultipartFile[] files) {
		/*这里的files数组就是前端传递过来的fiel文件*/
		return ""
	}

}