多部分表单解析错误 - 多部分中的边界无效：无内容类型问题？

Question

I am working on simple CRUD with react and react-redux and having trouble with POST in client side
BoardList.js

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getBoards, deleteBoard, addBoard } from "../../actions/boards"

export class BoardList extends Component {
    static propTypes = {
        boards: PropTypes.array.isRequired,
        getBoards: PropTypes.func.isRequired,
        deleteBoard: PropTypes.func.isRequired,
        addBoard: PropTypes.func.isRequired
    }
    componentDidMount() {
        this.props.getBoards();
    }
    shouldComponentUpdate(nextProps, nextState){
        return this.props.boards !== nextProps.boards
    }
    render(){
        return (
            <Fragment>
                <h2>Boards</h2>
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Author</th>
                            <th>Title</th>
                            <th>Created</th>
                            <th>Updated</th>
                            <th />
                        </tr>
                    </thead>
                    <tbody>
                        {this.props.boards.length > 0 && this.props.boards.map(board => (
                            <tr key={board.id}> 
                             // Uncaught TypeError: Cannot read property 'id' of undefined
                                <td>{board.id}</td>
                                <td>{board.author}</td>
                                <td>{board.title}</td>
                                <td>{board.created}</td>
                                <td>{board.updated}</td>
                                <td>
                                    <button 
                                      className="btn btn-danger btn-sm"
                                      onClick={this.props.deleteBoard.bind(this, board.id)}
                                      >
                                      Delete</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </Fragment>
        )
    }
}

const mapStateToProps = state => ({
    boards: state.boards.boards,
})

export default connect(mapStateToProps, {getBoards, deleteBoard, addBoard})(BoardList)

reducers/boards.js

import { GET_BOARDS, DELETE_BOARD, ADD_BOARD } from "../actions/types.js";

const initialState = {
    boards : []
}

export default function(state=initialState, action) {
    switch (action.type) {
        case GET_BOARDS:
            return {
                ...state,
                boards: action.payload
            }
        case DELETE_BOARD:
            return {
                ...state,
                boards:state.boards.filter(board => board.id !== action.payload)
            }
        case ADD_BOARD:
            return {
                ...state,
                boards:[...state.boards, action.payload]
            }
        default:
            return state;
    }
}

actions/boards.js

export const addBoard = board => (dispatch, getState) => {
    const token = getState().users.token;
    const config = {
        headers: {
            'Content-Type': undefined   //I suspect this is wrong
        }
    if(token){
        config.headers["Authroization"] = `Token ${token}`
    }
    axios
      .post("api/boards/",board, tokenConfig(getState))
      .then(res=> {
          dispatch(createMessage({ addBoard: "Board added"}));
          dispatch({
              type:ADD_BOARD,
              payload: res.data
          })
      })
      .catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}

I know this error message is related to django rest framework, however I can POST it through the Postman. So I think it is my Content-Type issue.(If I am wrong, please correct me) At very first time, I thought django rest framework pass json, so I used application/json . then I got The submitted data was not a file. Check the encoding type on the form. The submitted data was not a file. Check the encoding type on the form. I also used multipart/form-data and undefined then I get Multipart form parse error - Invalid boundary in multipart: None error.

How can I handle this issue?

Answer 1

    let formData = new FormData()
    formData.append('userPhotos', file)
    formData.append('your_field', your_data)
    formData.append('your_field', your_data)
    formData.append('your_field', your_data)

    axios({
        withCredentials: true,
        url: 'your_url',
        method: 'POST',
        data: formData
    })