Как успешно отправить форму с помощью валидатора формы пользовательского интерфейса материала, когда форма имеет тип ввода файла

Question

У меня есть форма, созданная с помощью валидатора форм UI. см. Валидатор форм материала UI . Форма имеет как текстовые, так и файловые (несколько) входы. Однако, когда я отправляю форму, используя content-type: multipart / form-data в качестве заголовка запроса, происходят две вещи (данные моей формы не отправляются в базу данных, а загруженные изображения показывают пустые объекты). Когда я использую content-type: application / json, мои данные формы отправляются в базу данных, но изображения отображаются пустыми. В обоих сценариях, когда я проверяю вкладку сети своего браузера, я вижу formData, но изображения показывают массив пустых объектов.

Вот моя форма:

const CreateBusinessPartial = ()=>{
  
  const classes = UseStyles();
    const dispatch = useDispatch();

    useEffect(()=>dispatch(fetchCategories()), []);
    const categories = useSelector(state=>state).generalReducer.category;
    
   const handleSubmission= ()=>{
    console.log(formState);
    if(formState.image.length === 0){
      alert("You must include at least one image");
    }
    else{
      dispatch(postBusiness(formState));
    }
   
    
   };
   const handleInputChange=(e)=>{
    const inputName = e.target.name;
    const value = e.target.value;
    setFormState({...formState, [inputName]:value })
   };

  

  const handleFile=(e)=>{
    const fileValue =[];    
    for (var i = 0; i < e.target.files.length; ++i) {
      fileValue.push(e.target.files[i]);
  }
    setFormState({...formState, image:fileValue});
}

const handleChangeMultiple = (event) => {
  const { options } = event.target;
  const value = [];
  for (let i = 0, l = options.length; i < l; i += 1) {
    if (options[i].selected) {
      value.push(options[i].value);
    }
  }
  setFormState({...formState, category_id:value});
};

  
const [formState, setFormState] = useState({name: '', description: '', url:'', phone:'', address: '', category_id: [], email:'', image: []  });
  console.log(formState);

    return(<Grid container={true}  >
      <Grid xs={12} className={classes.innerGrid} container item justify="center"  alignItems="center" >
       
       <ValidatorForm
          //ref="form"
          // className="form"
          encType="multipart/form-data"
          
          onSubmit={handleSubmission}
          onError={errors => console.log(errors)}>
     
        <TextValidator
              className={classes.formInput}
              label="Business Name"
              fullWidth={true}
              // variant="outlined"
              name="name"
              onChange={handleInputChange}
              value={formState.name}
              margin="none"
              type="text"
              validators={['required']}
              errorMessages={['This field is required',]}
              autoFocus={true}

          />
     
      <FormControl className={classes.formControl}>
        <InputLabel shrink htmlFor="select-multiple-native">
          Business Category
        </InputLabel>
        <Select
          multiple
          native
          value={formState.category_id}
          onChange={handleChangeMultiple}
          inputProps={{
            id: 'select-multiple-native',
          }}
        >
          {categories.map((category) => (
            <option key={category.id} value={category.id}>
              {category.name}
            </option>
          ))}
        </Select>
      </FormControl>

       
       
                
        
        <TextValidator
            className={classes.formInput}
            label="url"
            fullWidth={true}
            // variant="outlined"
            name="url"
            margin="none"
            type="url"
            onChange= {handleInputChange}
            // validators={['isUrl']}
            // errorMessages={['Must be a weblink']}
            value={formState.url}

        />

    <TextValidator
            className={classes.formInput}
            label="Email"
            fullWidth={true}
            // variant="outlined"
            name="email"
            margin="none"
            type="email"
            onChange= {handleInputChange}
            // validators={['isemail']}
            // errorMessages={['Must be a weblink']}
            value={formState.email}

        />
                
        
        <TextValidator
            className={classes.formInput}
            label="Phone(s)"
            fullWidth={true}
            // variant="outlined"
            name="phone"
            margin="none"
            type="text"
            onChange= {handleInputChange}
            validators={['required']}
            errorMessages={['This field is required']}
            value={formState.phone}

        />
                
        
        <TextValidator
            className={classes.formInput}
            label="Address"
            fullWidth={true}
            // variant="outlined"
            name="address"
            margin="none"
            type="text"
            onChange= {handleInputChange}
            // validators={['required']}
            errorMessages={['This field is required']}
            value={formState.address}

        />

        
       
              
        
        <TextValidator
              className={classes.formInput}
              label="Description"
              fullWidth={true}
              // variant="outlined"
              name="description"
              margin="none"
              type="text"
              multiline={true}
              rows={3}
              onChange= {handleInputChange}
              validators={['required']}
              errorMessages={['This field is required']}
              value={formState.description}

          />

          <input type="file" name="image" multiple onChange={handleFile} />
         

          <input
              accept="image/*"
              className={classes.input}
              style={{ display: 'none' }}
              id="raised-button-file"
              multiple
              type="file"
              name="image"
              onChange={handleFile}
            />
            <label htmlFor="raised-button-file">
              <Button variant="raised" component="span" className={classes.button}>
                Upload
              </Button>
            </label> 
    
       
        <Button color="primary"  className={classes.btn} type="submit"  variant="contained">Submit</Button>
              
               

      </ValidatorForm>


    </Grid>
  </Grid>)
}

А вот мой заголовок, который делает запрос ax ios:

const header=(token=undefined)=>({
  headers: {
    'Accept': 'application/json',
    'Authorization': `Bearer ${token}`,
    //'content-type': 'application/json',
    'content-type': 'multipart/form-data',
  }
 });

Что я упускаю. Мне нужно отправить sh мои изображения на сервер