本文共 1719 字，大约阅读时间需要 5 分钟。

需求

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

后端接口

/upload 单文件上传

• 上传成功：

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

失败：

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

/uploadMul 多文件上传

• 上传成功：

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

失败：

{
    	status: "failed", 	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

转载地址：http://qezdf.baihongyu.com/