formdata格式传递参数（formdata上传文件附加参数）

用户投稿 • 2021-09-13 16:48 星期一 • 阅读 5295

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

创建新的对象

const formData = new FormData()

方法

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

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

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

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

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

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

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

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

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

使用

// 参数
const formData = new FormData()
// 获取上传文件
const file = document.getElementById("upload-file").files[0]
// 假如data是额外的其他参数
for (const key in data) {
	if (data.hasOwnProperty(key)) {
  	formData.append(key, data[key)
  }
}
formData.append('file', file)
// 发送 POST 请求
axios({
  method: 'post',
  url: '/api/upload',
  data: formData,
  headers: {
  	"Content-Type": "multipart/form-data"
  }
});

本文《formdata格式传递参数（formdata上传文件附加参数）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

SEO小小课堂网
SEO教程
站长导航
SEO小小课堂网
SEO教程
站长导航
友情链接交换
搜素引擎算法

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：用户投稿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/23481.html