上传文件同时修改表单参数的content-type
背景
我们上传文件的时候需要对文件进行处理,如果要带有表单信息并且要求表单信息的content-type为application/json该如何处理呢?
编码实战
let formData = new FormData(); // 创建form对象
formData.append('file', file); // 通过append向form对象添加文件数据
formData.append('a', 'a'); // 添加form表单中其他数据
formData.append('b', 'b'); // 添加form表单中其他数据
formData.append("videoeditform",JSON.stringify(this.videoeditform));// 添加form表单中其他数据
formData.append('c',new Blob([JSON.stringify(c)], {
type: 'application/json',
}),
);// 修改某一个参数的content-type
额外补充
antd组件Upload上传问题
使用antd的Form控制Upload组件的时候,不能直接使用form.getFieldsValue获取Upload的信息,因为这样获取到的不是File类型的数据,而是一个数组类型,这样子的话上传会发现上传的文件不是二进制。
正常格式如下
非正常格式如下
处理方案
使用Upload组件的beforeUpload属性,并使用useState保存,上传的时候在进行处理即可