FormData

1,053 阅读1分钟

今天很开心,学会使用FormData了; 背景:有一个表单,表单里需要上传文件,但是需要在提交表单的时候调用接口上传。这时候就用到了FormData。

FormData

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

主要有两个方法

# 如果key 存在,则覆盖;如果key 不存在,则新增
formData.set(key, value)
# 如果key 存在,则新增;如果 key 不存在,则新增; 说人话:无论如何都是新增;(key 允许重复)
formData.append(key, value)

思路

当用Upload组件上传文件的时候,阻止文件上传,仅仅保存File实例。当点击提交的时候,将File以FormData的形式传给后台.

	const formData = new FormData();
    formData.append('file', file);
    # 如果需要传ObjectArray时
    # formData.append('obj', JSON.stringify(obj));
    fetch(url,{
        method: 'post',
        data: formData
    })
    .then(response => resoponse.json())