Vue FormData Object是一個(gè)JavaScript對(duì)象,它提供了一種方便的方式來(lái)構(gòu)造表單的數(shù)據(jù)。使用該對(duì)象可以簡(jiǎn)化表單數(shù)據(jù)的收集和提交過(guò)程,并且能夠支持文件上傳操作等特殊需求。
FormData對(duì)象需要在瀏覽器環(huán)境下使用,并且在使用時(shí)需要將其綁定到一個(gè)form元素上。它能夠自動(dòng)地收集綁定的form元素中所有帶有name屬性的表單控件,并且將其值存儲(chǔ)為鍵值對(duì)的形式。
// 創(chuàng)建一個(gè)新的FormData對(duì)象 let formData = new FormData(); // 添加表單數(shù)據(jù) formData.append('username', 'John'); formData.append('password', 'Doe'); // 發(fā)送POST請(qǐng)求 axios.post('/api/login', formData) .then((response) =>{ console.log(response.data); });
在上述示例中,我們創(chuàng)建了一個(gè)新的FormData對(duì)象,并且向其中添加了兩個(gè)鍵值對(duì),分別是username和password。然后,我們使用axios庫(kù)發(fā)送了一個(gè)POST請(qǐng)求,將FormData對(duì)象作為請(qǐng)求體發(fā)送到服務(wù)器端。
此外,使用FormData對(duì)象還可以支持文件上傳操作。只需要?jiǎng)?chuàng)建一個(gè)input[type=file]元素,并將其添加到綁定的form元素中,然后可以使用FormData對(duì)象的append方法將上傳的文件添加到FormData對(duì)象中:
在上述示例中,我們向綁定的form元素中添加了一個(gè)input[type=file]元素,它的name屬性為avatar。然后,我們使用FormData對(duì)象的構(gòu)造函數(shù)將綁定的form元素作為參數(shù),構(gòu)造出一個(gè)新的FormData對(duì)象,其中包含了上傳的文件。
最后,我們使用axios庫(kù)發(fā)送了一個(gè)POST請(qǐng)求,將FormData對(duì)象作為請(qǐng)求體發(fā)送到服務(wù)器端,以實(shí)現(xiàn)文件上傳操作。