如何解决Redux Form/Material UI 表单——发送二进制文件到服务器
我已经构建了一个表单框架来处理 redux 表单并包装字段以使用材料 ui 组件输入。
当我使用 formData() 包装提交数据时,我让表单框架用于发送文件;
这很有效 - 但是当我尝试在 redux 表单中使用字段数组并将文件字段附加到它时 - 它作为键返回服务器 - 代表该字段 - 但内容被列为一个“[object object]”——就像数据已经转换成字符串,无法解码。
--
if(this.props.returnAsFormData){
const formData = new FormData();
for (var field in data) {
if(typeof data[field] !== "object"){
formData.append(field,data[field]);
}
else{
// loop through object
//console.log(field,data[field]);
if(data[field]){
for (var i = 0; i < data[field].length; i++) {
formData.append(field,data[field][i]);
}
}
}
}
data = formData;
}
this.props.submitHandler(data);
--
我试图查看是否只能触摸文件字段才能将其从 FileList 转换为二进制文件 - 但我似乎无法执行与 formData 相同的操作。我试过这样的事情 - 但它只是不像以前那样以二进制文件的形式出现。
function create_binary(file,callback) {
var reader = new FileReader();
reader.onload = function() { callback(reader.result) };
reader.readAsBinaryString(file);
}
x
for (var field in data) {
if(data[field] && typeof data[field] === "object"){
var file = data[field][0];
create_binary(file,function(binary) {
data[field] = binary;
});
}
}
解决方法
这解决了我的问题 --- 需要遍历嵌套的 json 对象。
https://redux-form.com/8.3.0/examples/fieldarrays/ Redux 表单字段数组 - 使 json 更加复杂,因为子字段位于数组对象中 - 因此如果子字段中有文件字段 - 需要在 FormData 中生成 json 输出。
Convert JS Object to form data
{{1}}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。