前后分离单文件上传与多文件上传，前端实现

本文链接：https://blog.csdn.net/qq_26192391/article/details/112061297

需求

前后分离的开发模式下，实现前端文件上传，包括单文件与多文件

在这里插入图片描述

后端接口

/upload 单文件上传
方法：post
参数：file --文件
响应：

上传成功：

{
	status: "ok",
	url:"http://localhots:8080/file/xxx"
}

失败：

 {
 	status: "failed",
 	msg:"<msg>"
 }

/uploadMul 多文件上传
方法：post
参数：files --文件
响应：

上传成功：

{
	status: "ok",
	upload: 2,
	succeed:1,
	detail: [
	{
		staus: "ok",
		url:"http://localhots:8080/file/xxx"
	},
	{
		staus: "failed",
		msg:"<msg>"
	}
	]
}

失败：

 {
 	status: "failed",
 	msg:"<msg>"
 }

前端代码

核心代码

单文件

uploadFile:function(){

    var formData = new window.FormData()
    formData.append('file',document.querySelector('input[type=file]').files[0])

    var options = {
        url:"http://localhost:8080/upload",
        data: formData,
        method: 'post',
        headers:{
            'Content-Type':'multipart/form-data'
        }
    }

    //send request
    axios(options).then(
        (res)=>{
            console.log(res)
        }
        ).catch(
        (error)=>{console.log(error)}
        )
}

多文件

uploadMulFile:function(){

       var formData = new window.FormData()
       
        var files= document.querySelector('#mulFile').files;
        for (let index = 0; index < files.length; index++) {
            formData.append('files',files[index])
        }


        var options = {
            url:"http://localhost:8080/uploadMul",
            data: formData,
            method: 'post',
            headers:{
                'Content-Type':'multipart/form-data'
            }
        }

        //send request
        axios(options).then(
            (res)=>{
                console.log(res)
            }
            ).catch(
            (error)=>{console.log(error)}
            )
        }
}

完整html文件代码

使用了vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<body>
    <div id="app">
        <form >
            <input type="file" class="file" >
            <input type="button" value="submit" @click="uploadFile">

            <hr/>
            <input type="file" class="file" id="mulFile" value="please choose multipart files" multiple>
            <input type="button" value="submit" @click="uploadMulFile">
        </form>
    </div>

    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                file:"null"
            },

            methods: {
            	//上传单文件
                uploadFile:function(){

                    var formData = new window.FormData()
                    formData.append('file',document.querySelector('input[type=file]').files[0])

                    var options = {
                        url:"http://localhost:8080/upload",
                        data: formData,
                        method: 'post',
                        headers:{
                            'Content-Type':'multipart/form-data'
                        }
                    }

                    //send request
                    axios(options).then(
                        (res)=>{
                            console.log(res)
                        }
                        ).catch(
                        (error)=>{console.log(error)}
                        )
				},
				//上传多文件
                uploadMulFile:function(){

                    var formData = new window.FormData()
                   
                    var files= document.querySelector('#mulFile').files;
                    for (let index = 0; index < files.length; index++) {
                        formData.append('files',files[index])
                    }


                    var options = {
                        url:"http://localhost:8080/uploadMul",
                        data: formData,
                        method: 'post',
                        headers:{
                            'Content-Type':'multipart/form-data'
                        }
                    }

                    //send request
                    axios(options).then(
                        (res)=>{
                            console.log(res)
                        }
                        ).catch(
                        (error)=>{console.log(error)}
                        )
                    }
            },

        });

    </script>

</body>
</html>