无法在构建后将照片从 React 前端发送到表达后端(创建-反应-应用程序)

Question

好的，所以我有一个MERN应用程序(CRA(和照片上传。一切都很好，但是当我做npm运行构建时，我无法将照片(超过1MB(发送到后端。我用邮递员来测试，再次:)工作得很好。在开发模式下它的工作。当我想上传照片时，有些东西阻止了来自前端的请求。我已经检查了摩根的日志，它显示这个上传大照片的请求没有发生。我使用 axios 与后端通信并快速上传文件，但后端运行良好。我不知道是什么阻止了我的照片。在调试模式下快速上传文件也告诉"请求不符合上传条件！

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

节点中的控制器：

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

图库组件：

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

好的，伙计们，我发现了一个问题。我的droplet上有nginx，在nginx中上传的默认文件大小设置为1mb。nginx conf 中的这一行将完成这项工作client_max_body_size 100M;当然，100M就是一个例子。