构建后无法将照片从 React 前端发送到表达后端（create-react-app）

Question

Ok so i have an MERN app (CRA) and photo upload. Everything works great but when i will do npm run build i cant send photo (over 1MB) to backend. I've used postman to test and again worked great:). In development mode its working. Something is blocking requests from frontend when i want to upload photos. I've checked logs with morgan and it shows that this request with large photo upload didnt happen. Im using axios to communicate with backend and express file upload but backend works well. I dont know what is blocking my photos. Also express file upload in debuging mode is telling that "Request is not eligible for upload!"

action in redux:

  export const addGalleryPhoto = (file) => async (dispatch) => {
  const config = {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  };
  try {
    await axios.put(`/api/v1/config/uploadGalleryPhoto`, file, config);
    dispatch(getPhotos());
  } catch (err) {
    const errors = err.response.data.error.split(",");
    if (errors) {
      errors.forEach((error) => dispatch(setAlert(error, "error")));
    }
    dispatch({ LOAD_PHOTOS_FAILED });
  }
};

controller in node:

exports.uploadGalleryPhoto = asyncHandler(async (req, res, next) => {
  if (!req.files) {
    return next(new ErrorResponse(`Dodaj plik`, 400));
  }

  const file = req.files.file;

  // Make sure the image is a photo
  if (!file.mimetype.startsWith("image")) {
    return next(new ErrorResponse(`Możesz wysłać tylko zdjęcia`, 400));
  }

  if (file.size > process.env.MAX_FILE_UPLOAD) {
    return next(
      new ErrorResponse(
        `Zbyt duże zdjęcie. Maksymalny rozmiar pliku: ${Math.round(
          process.env.MAX_FILE_UPLOAD / 1024
        )} MB`,
        400
      )
    );
  }

  file.name = `photo_${uuid()}${path.parse(file.name).ext}`;

  file.mv(`${process.env.FILE_UPLOAD_PATH}/${file.name}`, async (err) => {
    if (err) {
      console.error(err);
      return next(new ErrorResponse(`Problem with file upload`, 500));
    }
    const config = await Config.find();
    await Config.findByIdAndUpdate(config[0].id, {
      galleryPhotos: [...config[0].galleryPhotos, file.name],
    });

    res.status(200).json({
      success: true,
      data: file.name,
    });
  });
});

Gallery component:

import React, { useEffect, useState, useRef, Fragment } from "react";
import PropTypes from "prop-types";
import { Card, Modal, Button } from "antd";
import { DeleteOutlined } from "@ant-design/icons";
import Spinner from "./../layout/Spinner";
import { connect } from "react-redux";
import {
  addGalleryPhoto,
  getPhotos,
  deletePhoto
} from "./../../store/actions/gallery";

const AdminGallery = ({ photos, addGalleryPhoto, getPhotos, deletePhoto }) => {
  useEffect(() => {
    getPhotos();
  }, [getPhotos]);
  const fileInput = useRef();
  const [value, setValue] = useState("");
  const [formData, setFormData] = useState({
    deleteVisible: false,
    photo: null
  });

  const onSubmit = e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", value);
    addGalleryPhoto(formData);
    setValue("");
  };

  if (photos.loading || photos.photos.null) {
    return <Spinner />;
  } else {
    return (
      <Fragment>
        <div className="admin-gallery">
          <div>
            <input
              type="file"
              style={{ display: "none" }}
              ref={fileInput}
              onChange={e => setValue(e.target.files[0])}
            />
            {value === "" ? (
              <button
                type="button"
                className="btn btn--primary"
                onClick={e => fileInput.current.click()}
              >
                Dodaj plik
              </button>
            ) : (
              <button
                type="button"
                className="btn btn--primary"
                onClick={e => onSubmit(e)}
              >
                Wyślij zdjęcie
              </button>
            )}

            <div>
              {photos.photos.length === 0 ? (
                <div className="no-content">Brak Zdjęć</div>
              ) : (
                <div className="admin-gallery__photo-wrapper">
                  {photos.photos.map(item => {
                    return (
                      <Card
                        style={{ padding: "0 !important" }}
                        key={item}
                        actions={[
                          <DeleteOutlined
                            onClick={() =>
                              setFormData({
                                ...formData,
                                deleteVisible: true,
                                photo: item
                              })
                            }
                          />
                        ]}
                      >
                        <img
                          className="admin-gallery__photo"
                          src={`${process.env.PUBLIC_URL}/uploads/${item}`}
                          alt="photo"
                        />
                      </Card>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </div>
        {formData.deleteVisible && formData.photo !== null ? (
          <Modal
            visible={formData.deleteVisible}
            title="Kasowanie zdjęcia"
            onOk={() => {
              deletePhoto(formData.photo);
              setFormData({ ...formData, deleteVisible: false, photo: null });
            }}
            onCancel={() =>
              setFormData({ ...formData, deleteVisible: false, photo: null })
            }
            footer={[
              <Button
                key="back"
                onClick={() =>
                  setFormData({
                    ...formData,
                    deleteVisible: false,
                    photo: null
                  })
                }
              >
                Zamknij
              </Button>,
              <Button
                key="accept"
                onClick={() => {
                  deletePhoto(formData.photo);
                  setFormData({
                    ...formData,
                    deleteVisible: false,
                    photo: null
                  });
                }}
              >
                Skasuj
              </Button>
            ]}
          >
            <p>Na pewno chcesz skasować to zdjęcie?</p>
          </Modal>
        ) : (
          ""
        )}
      </Fragment>
    );
  }
};

AdminGallery.propTypes = {
  photos: PropTypes.object.isRequired,
  getPhotos: PropTypes.func.isRequired,
  addGalleryPhoto: PropTypes.func.isRequired,
  deletePhoto: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  photos: state.photos
});

export default connect(mapStateToProps, {
  addGalleryPhoto,
  getPhotos,
  deletePhoto
})(AdminGallery);

Answer 1

Ok guys i've found an issue. I have nginx on my droplet and default file size to upload in nginx is set to 1mb. This line in nginx conf will do the job client_max_body_size 100M; Of course 100M is for example.