使用FormData提交表单和上传文件

FormData

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

如果你想构建一个简单的GET请求，并且通过的形式带有查询参数，可以将它直接传递给URLSearchParams。

实现了 FormData接口的对象可以直接在for...of结构中使用，而不需要调用entries() : for (var p of myFormData)的作用和 for (var p of myFormData.entries())是相同的。

formdata的内置函数

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

FormData.delete()
从 FormData 对象里面删除一个键值对。

FormData.entries()
返回一个包含所有键值对的iterator对象。

FormData.get()
返回在 FormData 对象中与给定键关联的第一个值。

FormData.getAll()
返回一个包含 FormData 对象中与给定键关联的所有值的数组。

FormData.has()
返回一个布尔值表明 FormData 对象是否包含某些键。

FormData.keys()
返回一个包含所有键的iterator对象。

FormData.set()
给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

FormData.values()
返回一个包含所有值的iterator对象。

通俗理解

将本地数据（.xlsx、.docx等文件）上传或导入数据库，有时候需要使用FormData 对象。FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。

一、创建对象

创建一个FormData对象实例

1、常用的创建

let formData = new FormData();
2、vue中的创建

let formData = new window.FormData();

3、在表单的基础上创建

<form id="fromCont" action="" method="post">
    <input type="text" name="content">
    <input type="submit" value="提交">
</form>
//根据id获取表单
  var form = $("#fromCont");
//初始化实例
var formData = new FormData(form);
// 获取content内容
var content= formData.get("content"); 
//通过append() 方法向对象中添加content键值对
formData.append("content",content);
1
2
3
4
5
6
7
8
9
10
11
12

二、操作方法：

formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。
1、获取值

//通过get(key)/getAll(key)来获取对应的value
formData.get("value");  
1
2

2、添加数据

//通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
formData.append("key1", "value1");
formData.append("key2", "value2");
formData.append("key2", "value3");
//获取key1
formData.get("key1");  //返回 "value1"
formData.get("key2");  //返回 "value2"
formData.getAll("key2");  //返回 ['value2','value3']
1
2
3
4
5
6
7
8

3、设置、修改数据

//通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。
formData.append("key1", "value1");
formData.set("key1", "value2");
//获取key1
formData.get("key1");  //返回 "value2"
1
2
3
4
5

4、删除数据

//通过delete(key)，来删除数据
formData.append("key1", "value1");
formData.delete("k1");
//获取key1
formData.get("key1");  //返回 []
1
2
3
4
5

5、判断数据的存在

//通过has(key)来判断是否对应的key值,如果有对应的key值就返回true,如果没有则返回false
formData.append("key1", "value1");
formData.has("key1"); // true
formData.has("key2"); // false
1
2
3
4

三、vue上传文件

  <template>
    </div>
      <div class="fileItem">
        //上传文件的input，type设置为file
        <input type="file" ref="fileId" @change="getFile">
      </div>
  </div>
</template>

<script>
export default {
data(){
   return:{
    //赋值input中file内容
    xlsxFile:''
    }
   },
  methods:{
   getFile(){
     //获取file内容
    let files = this.$refs.fileId.files[0];
     this.xlsxFile = files;
   },
    //上传文件
    importRow() {
      let that = this;
      if (that.xlsxFile == "") {
        that.$message.error('请先添加文件');
        return;
      }
    // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
    //创建一个FormData对象，然后通过append() 方法向对象中添加键值对
      let formData = new window.FormData(); 
      formData.append("file", that.xlsxFile);
     // that.importUrl 上传的接口url
      that.$axios.post(
          that.importUrl,
          formData
        ).then(function(response) {
          that.$message.success('上传成功');
        }) .catch(function(error) {
          that.$message.error(res.data.msg);
        });
}

}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

四、HTML中上传文件

//HTML中
<div>
<input name="file" type="file" id="fileCont" value="">
</div>
//JS中，这里引入了Jquery
       $('#fileCont').on('change',function(){
       var fileObj = $(this).files[0]; 
       if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
        //这里是我自己定义的弹框方法
        popup({type:'tip',bg:false,msg:"请选择件",delay:1000,clickDomCancel:true});
        return;
         }
        var formFile = new FormData();
         //加入文件对象,向接口传入两个参数file,id
        formFile.append("file", fileObj); 
        formFile.append("id", id); 
         var data = formFile；
          $.ajax({
            url:urlCur,
            data: data,
             type: "POST",
             dataType: "json",
             //上传文件无需缓存
             cache: false,
             //用于对data参数进行序列化处理 这里必须false
              processData: false,
             //必须
             contentType: false, 
             success: function (res) {
               if(res.code === 200){
              popup({type:'success',bg:false,msg:"上传成功",delay:1000,clickDomCancel:true});
              }else{
              popup({type:'error',bg:false,msg:res.msg,delay:1000,clickDomCancel:true});
                }
             },
         }) 
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

上传文件需要前端后台对比数据，而且文件上传时，可能会遇到一些麻烦，比如前端传值的方法不对、后台接口报500，我们可以打开开发者工具查看NetWork查看请求。

更详细的请查看FormData