formData上传文件时，携带【数组对象参数】 · 工作篇

[TOC] >[success] # formData上传文件时，携带【数组对象参数】在工作中经常会遇到用 **formData** 方式 **上传文件** 时 **携带其它参数** 的情况，还有一种情况，前端需要使用 **formData** 的方式传 **数组对象** 的 **参数** ，写法如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> <script> $(function(){ // 获取元素 const selectElement = document.querySelector('#file'); // 监听 change 事件 selectElement.addEventListener('change', (event) => { // 实例化formData对象 const formData = new FormData() // 取得文件 const file = event.target.files[0] // 把文件添加到formData对象中 formData.append('file', file) // 给后台传入数组对象 formData.append('list[0].name', '小明') formData.append('list[1].name', '小黑') // 调用接口传给后台 $.ajax({ url: 'api.php', method: 'POST', contentType: false, processData: false, data: formData, success: function (res) { console.log(res) } }) }); }) </script> </head> <body> <input type="file" id="file"> </body> </html> ~~~