JQ中使用FormData+Ajax發送請求及使用express接收處理FormData數據

最近寫大創項目的時候，要做登錄功能，考慮到之后還需要上傳頭像圖片，因此決定使用FormData發送表單請求。項目中用的是JQ封裝的ajax，配合FormData使用的時候出現了一些問題。

首先這里就不再說明FormData的作用和用法，如果不清楚的可以看看這篇文章：FormData對象的使用。

1. 可能出現的問題

JQ中初始化FormData對象

在JQ中，如果想使用一個已經存在的表單初始化FormData對象，在選中這個表單DOM的時候，不能使用JQ自帶的 $('form') 方法，而是應該使用JS原生寫法：

//錯誤的寫法： let formData = new FormData($('form')); //正確的寫法： let formData = new FormData(document.querySelector('form'));

如果使用JQ的選擇器寫法，那么會報錯，大致意思應該是FormData初始化的參數不正確。使用JS原生寫法就沒問題了。

配合ajax無法發送請求

如果在JQ封裝的ajax中發送FormData數據，發生報錯：TypeError: 'append' called on an object that does not implement interface FormData 。加入這兩行：

processData: false, contentType: false

2. 完整的發送請求代碼

//使用Formdata提交登錄信息//初始化表單let formData = new FormData(document.querySelector('form'));//有需要的話可以修改formdata數據//formdata.set('identiy', identiy);//發送ajax請求$.ajax({url: './login',type: 'post',data: formData,processData: false, //不處理數據contentType: false, //不設置內容類型success: function (data) {console.log(data)},error: (err) => {console.log(err)}})

3. 服務器端使用express接收處理FormData數據

需要安裝 express-formidable 模塊：

npm i express-formidable

使用：

const express = require('express'); const app = express();//引入模塊 const formidable = require('express-formidable'); //掛載 app.use(formidable());//接收請求 router.post('/formdata',(req,res,next)=>{console.log(req.fields); // formData中的參數console.log(req.files); // formData中的文件 })

總結

以上是生活随笔為你收集整理的JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。