关于一个循环

Question

login:function(data){

    let fd=new FormData()
    for(var key in data){
        fd.append(key,data[key])
    }
    console.log(fd)
 }
 
 

传入data之后 一直输出空的FormData对象

Answer 1

其实对象里内容是有的，只不过它不像json一样可以直接在控制台log出来而已。

var data = {
  text: '123',
  phone: 'asdasd'
};
let fd=new FormData();
for(var key in data){
  fd.append(key,data[key]);
}
console.log(fd.get('text'));

你用get方法试试FormData.get()

Answer 2

FormData打印出来是一个空的Objet，但并不是说它的内容是空的，只是它对前端开发人员是透明的，无法查看、修改、删除里面的内容，只能append添加字段。

FormData无法得到文件的内容，而使用FileReader可以读取整个文件的内容。用户选择文件之后，input.files就可以得到用户选中的文件，如下代码：

$("#file-input").on("change", function() {
    let fileReader = new FileReader(),
        fileType = this.files[0].type;
    fileReader.onload = function() {
        if (/^image/.test(fileType)) {
            // 读取结果在fileReader.result里面
            $(`<img src="${this.result}">`).appendTo("body");
        }
    }
    // 打印原始File对象
    console.log(this.files[0]);
    // base64方式读取
    fileReader.readAsDataURL(this.files[0]);    
});

把原始的File对象打印出来是这样的：

它是一个window.File的实例，包含了文件的修改时间、文件名、文件的大小、文件的mime类型等。如果需要限制上传文件的大小就可以通过判断size属性有没有超，单位是字节，而要判断是否为图片文件就可以通过type类型是否以image开头。

参考这篇文章

前端本地文件操作与上传

Answer 3

确实上面的回答也说明了. 这说明 FormData 类的 toString() 方法没有实现得友好.
除了上面提取的 FormData.get 还有一个 FormData.getAll

示例如下:

function debugLogin(data){
    let fd = new FormData()
    for(var key in data){
        fd.append(key,data[key])
    }
    console.log(fd.getAll("name"))
    console.log(fd.getAll("age"))
}

debugLogin({
    name:"banxi",
    age: 18
})