formData方法以及异步上传文件

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

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");

异步上传文件

// 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"
            });
          }
        });