Сохранить изображение со статьей, используя мульти-форму

Question

У меня проблема, картинка не сохраняется при отправке на сервер.Я проверил через Почтальон, мой API работает правильно.До этого я успешно сохранил текстовые значения статьи (заголовок, описание).Подскажите что нетак?спасибо

мое действие //

export const addArticle = (headline, description, image) => {
  return (dispatch, getState) => {
    console.log('input', headline, description, image); // have image here
    // let headers = {"Content-Type": "application/json"};
    let headers = {"Content-Type": "multipart/form-data"};
    let {token} = getState().auth;

    if (token) {
      headers["Authorization"] = `Token ${token}`;
    }

    let formData = new FormData();
    formData.append('headline', headline);
    formData.append('description', description);
    formData.append('image', image, image.name);

    // let body = JSON.stringify({headline, description});
    return fetch("/api/articles/", {headers, method: "POST", body: formData})
    .then(res => {
    if (res.status < 500) {
      return res.json().then(data => {
        return {status: res.status, data};
      })
    } else {
      console.log("Server Error!");
      throw res;
    }
    })
    .then(res => {
    if (res.status === 201) {
      console.log('in fetch', res.data); // no file here
      return dispatch({type: ADD_ARTICLE, article: res.data});
    } else if (res.status === 401 || res.status === 403) {
      dispatch({type: AUTHENTICATION_ERROR, data: res.data});
      throw res.data;
    }
    })
    }
};

мой редуктор //

export default function articles(state=initialState, action) {
  let articleList = state.slice();
  ...
  case ADD_ARTICLE:
        articleList.unshift(action.article);
        console.log('list', articleList);
        return articleList;
  ...

Answer 1

Как написано в комментариях, я выкладываю решение (вероятно, не совсем правильное), которое работает для меня:

export const addArticle = (headline, description, image) => {
  return (dispatch, getState) => {
    let headers = {};
    let {token} = getState().auth;

    if (token) {
        headers["Authorization"] = `Token ${token}`;
    }

    let formData = new FormData();
    formData.append('headline', headline);
    formData.append('description', description);
    if (image !== null) {
        formData.append('image', image, image.name);
    }

    return fetch("/api/articles/", {headers, method: "POST", body: formData})
       .then(res => {
           if (res.status < 500) {
               return res.json().then(data => {
                  return {status: res.status, data};
               })
           } else {
               console.log("Server Error!");
               throw res;
           }
       })
       .then(res => {
          if (res.status === 201) {
             return dispatch({type: ADD_ARTICLE, article: res.data});
          } else if (res.status === 401 || res.status === 403) {
             dispatch({type: AUTHENTICATION_ERROR, data: res.data});
             throw res.data;
          }
       })
  }
};