文件上传---FormData格式的传参

前端在实现文件上传功能时常常使用FormData,用于构造键值对数据。可以通过append方法添加数值或文件。对于复杂情况,如需上传文件和元数据,可以结合Blob将数据转换为特定格式。此外,FormData还支持删除、检查和获取所有键值对。Blob则常用于处理二进制数据,如分片上传、图片压缩等。
摘要由CSDN通过智能技术生成

一般前端做  文件导入功能 / 上传功能 的时候会用到Formdata的格式,来上传文件和数据

会比较常用的两种方式:

let formData = new FormData(); // 当前为空

1. 直接表单传值

可以使用FormData.append来添加键/值对到表单里面;

//传数值
formData.append('name', id);
//传文件
formData.append('files', file);

2. 后端的多部分传参

和后端接口保持统一,那么可能不全是表单格式的数据, 可能设置的不同的格式,比如文件格式的文件和数据格式的数值,因此需要带格式传过去(new Blob方法)。

//传文件
formData.append('file-data', file);
//传数据(元数据格式)
formData.append('meta-data',new Blob([JSON.stringify(data)], { type: 'application/json' }) )


方法拓展:

1. FormData  对象将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据key/value,而独立于表单使用。如果表单enctype属性设为 multipart/form-data,则会使用表单的submit()方法来发送数据,从而发送数据具有同样形式。

  FormData.append(key,value)加数据,如果指定的key不存在则会新增一条数据,如果key存在,则追加到数据末尾.

  FormData.append(key)  从对象中删除指定键,即 key,和它对应的值,即 value

  FormData.has(key) 返回一个布尔值,表示该FormData对象是否含有某个key

  FormData.getAll(key)方法会返回该 FormData 对象指定 key 的所有值。

2. Blob  表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。

  Blob 使用场景: 分片上传,从互联网下载数据,Blob 用作 URL,Blob 转换为 Base64,图片压缩,生成 PDF 文档

  • 11
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值