FormData方法概念

FormData方法概念

1、FormData 概念

       FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。

2、FormData方法

• append()

        向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

    formData.append("key",value);

• delete()

        从 FormData 对象里面删除一个键值对。

    formData.delete("key");

• entries()

        返回一个 iterator对象 ，此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 USVString 对象；value是一个 USVString , 或者 Blob对象。

    var formData = new FormData();
    formData.append('key1', 'value1');
    
    for(var i of formData.entries()) {
       console.log(i[0]+ ', '+ i[1]);    // key1,value1
    }

• has()

        返回一个布尔值，表示该FormData对象是否含有某个key

    formData.has("key");

keys()

        返回一个迭代器（iterator），遍历了该 formData 包含的所有key ，这些 key 是 USVString 对象

    var formData = new FormData();
    formData.append('key1', 'value1');
    
    for (var key of formData.keys()) {
       console.log(key);     // key1
    }

• values()

        返回一个允许遍历该对象中所有值的 迭代器 。这些值是 USVString 或是Blob 对象。

    var formData = new FormData();
    formData.append('key1', 'value1');
    
    for (var value of formData.values()) {
       console.log(value);    // value1
    }

• set()

        方法会对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。

    formData.set("key", value);
    or
    formData.set("key", value, filename);
    // 当第二个参数传递的是一个blob对象（Blob）或者file对象（File），filename参数就代表传给服务端的文件名（一个USVString）
    // Blob 对象的默认文件名是 "blob"。

• get()

        返回FormData对象中和指定的键关联的第一个值

    formData.get("key");

getAll()

        返回该 FormData 对象指定 key 的所有值

    formData.getAll("key");

3、异步上传文件

    // formData创建一个空对象
    let formData = new window.FormData();
    // append()方法添加数据
    // 想要打印的话需要使用get()方法
    formData.append("file", file);
    // 调用接口上传文件
            uploading(formData).then(res => {
            //  接收返回的报错信息  这里返回的是一个数组
              this.error = res.data.data.err;
              if (res.data.data.err) {
                this.dialogFormVisible = true;
              } else {
              //  上传成功的提示  elementui组件
                this.$message({
                  message: `共${res.data.data}条，上传成功`,
                  type: "success"
                });
              }
            });