Redux Form/Material UI 表单 - 向服务器发送二进制文件答案

【问题标题】：Redux Form/Material UI form - sending binary files to the serverRedux Form/Material UI 表单 - 向服务器发送二进制文件
【发布时间】：2021-02-05 00:13:10
【问题描述】：

我已经构建了一个表单框架来处理 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);
}

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;
    });
  }
}

【问题讨论】：

标签： reactjs file material-ui redux-form

【解决方案1】：

这解决了我的问题 --- 需要遍历嵌套的 json 对象。

https://redux-form.com/8.3.0/examples/fieldarrays/ Redux 表单字段数组——使 json 更复杂，因为子字段在数组对象中——所以如果子字段中有文件字段——json 输出需要在 FormData 中进行。

Convert JS Object to form data

function buildFormData(formData, data, parentKey) {
  if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
    Object.keys(data).forEach(key => {
      buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
    });
  } else {
    const value = data == null ? '' : data;

    formData.append(parentKey, value);
  }
}

function jsonToFormData(data) {
  const formData = new FormData();
  
  buildFormData(formData, data);
  
  return formData;
}

const my_data = {
  num: 1,
  falseBool: false,
  trueBool: true,
  empty: '',
  und: undefined,
  nullable: null,
  date: new Date(),
  name: 'str',
  another_object: {
    name: 'my_name',
    value: 'whatever'
  },
  array: [
    {
      key1: {
        name: 'key1'
      }
    }
  ]
};

jsonToFormData(my_data)

【讨论】：