Javascript 循环 FormData

在前端开发中，10分之九的上传文件都是通过 FormData 来实现的。然而，有时候我们需要对 FormData 的数据进行循环操作，这时候就需要用到 Javascript 循环 FormData。本文将介绍如何循环 FormData，以及一些使用技巧。

FormData 概述

• FormData 是一个表示表单数据的键值对的对象。它的主要作用是在前端通过 Ajax 提交表单数据，以上传文件或序列化表单等。
• FormData 对象可以通过 append() 方法向其中添加数据，例如：FormData.append('username', 'admin')。
• FormData 的 keys() 和 values() 方法可以分别获取表单数据中的键名和键值。

循环 FormData

要想循环 FormData，首先需要获取到其所有的键名。可以通过 keys() 方法进行获取。

let formData = new FormData();
formData.append('username', 'admin');
formData.append('password', '123456');

for (let key of formData.keys()) {
    console.log(key); // 'username', 'password'
}

然后，我们就可以通过循环键名来获取 FormData 的值：

let formData = new FormData();
formData.append('username', 'admin');
formData.append('password', '123456');

for (let key of formData.keys()) {
    console.log(formData.get(key)); // 'admin', '123456'
}

循环 FormData 的注意事项

• 当 FormData 中存在文件时，它无法通过 get() 方法获取其值。所以需要在循环中判断值是否为文件类型：

for (let key of formData.keys()) {
    let value = formData.get(key);
    if (value instanceof File) {
        console.log(key, 'is a File');
    } else {
        console.log(formData.get(key));
    }
}

• FormData 中的键名如果重复，后面的值会覆盖前面的值。循环时要注意这种情况。

• 对于类数组对象，只要具有 length 属性和可枚举属性，就可以使用 append() 方法向其中添加数据。

let arr = ['apple', 'orange'];
let formData = new FormData();

for (let i = 0; i < arr.length; i++) {
    formData.append('fruit', arr[i]);
}

for (let key of formData.keys()) {
    console.log(formData.get(key)); // 'apple', 'orange'
}

以上就是 Javascript 循环 FormData 的一些技巧和注意事项。希望对你有所帮助。