使用Express multer从React将图像存储在postgresql中

Question

我正在尝试使用nodejs（express）和multer将我的应用程序中的图像保存到后端，我尝试了这些How to upload image using javascript fetch api and express multer 收到消息file uploaded后，如何将其存储到数据库中？

这是我的应用程序中的代码

class UploadCover extends React.Component {
    constructor(props){
        super(props);
        this.state={
            id: this.props.location.state.id,
            selectedFile : '', 
            imagePreviewUrl: ''
        }
    }


    //handle image change
    handleImageChange = (e) => {
        e.preventDefault();
        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () =>{
            this.setState({
                selectedFile:file,
                imagePreviewUrl: reader.result
            });
        };
        reader.readAsDataURL(file);
        this.handleUploadCover(e.target.files[0]);
    }

    //upload cover
    handleUploadCover = (file) => {
        let form = new FormData(this.refs.myForm);
        form.append('myImage', file);
        fetch('http://localhost:3001/upload-cover', {
            method: 'post',
            header: { "Content-Type" : "application/json"},
            body: form
        })
        .then( res =>res.json())
        .then(data => console.log("data: ", data))
    };


    render() {
        const { classes, ...rest } = this.props;
        const { id, imagePreviewUrl } = this.state;
        console.log("url: ", imagePreviewUrl)
        let $imagePreview = null;
        if(imagePreviewUrl){
            $imagePreview = <img style={{width: "100%", height: "100%"}} src={imagePreviewUrl}/>;
        }else{
            $imagePreview = (
                <div className={classes.previewText}>Please select cover</div>
            );
        }

        return (
          <div>
            <HeaderHome/>

            <div className={classNames(classes.main, classes.mainRaised)}>
              <div className={classes.container}>
                <div className={classes.storymargin}>
                <h2 className={classes.title}>Upload Cover Story</h2>
                <Card className={classes.uploadcontainer}>
                    <CardContent>
                        <div className={classes.imgPreview}>{$imagePreview}</div>
                        <form ref='myForm' encType='multipart/form-data'>
                            <input 
                                accept="image/*"
                                className={classes.input}
                                id="raised-button-file"
                                multiple
                                type="file"
                                onChange={ e => this.handleImageChange(e)}
                                // ref='myForm'
                            />
                        </form>
                        <label htmlFor="raised-button-file">
                            <Button component="span" className={classes.buttonupload}>
                            Choose Image
                            </Button>
                        </label>

                    </CardContent>
                    <CardActions>
                        <Link 
                            to={{
                                pathname: "/create-chapter",
                                state: {id : id}
                            }}
                        >
                            <Button size="small" clor="primary" className={classes.buttonnextup}
                            onClick={ e => this.handleUploadCover(e) }
                            >
                                Next
                            </Button>
                        </Link>
                    </CardActions>
                </Card>
                </div>
              </div>
            </div>
            <div className={classes.footer}>
              <Footer />
            </div>
          </div>
        );
      }
}

这是后端

//set storage engine
const storage = multer.diskStorage({
    destination: './public/uploads',
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
})

//Init upload
const upload = multer({
    storage: storage,
    limits: {fileSize: 1000000},
    fileFilter: (req, file, cb) => {
        checkFileType(file, cb);
    }
}).single('myImage');

//Check File Type
checkFileType = (file, cb) => {
    //Allowed ext
    const filetypes = /jpeg|jpg|png|gif/;
    //Check ext
    const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    //Check mime
    const mimetype = filetypes.test(file.mimetype);

    if(mimetype && extname){
        return cb(null, true);
    }else{
        cb('Error: Images Only');
    }
}
//upload cover story
app.post('/upload-cover', (req, res) => {
    console.log('handling upload image');
    upload( req, res, (err) => {
        if(err){
            console.log('first err', err);
            res.send({
                msg: err
            });
        }else{
            if(req.file === undefined){
                console.log('Error: No File Selected');
                res.send({
                    msg: 'Error: No File Selected'
                });
            }else{
                console.log('File Uploaded');
                res.send({
                    msg: 'File Uploaded',
                    file: `uploads/${req.file.filename}`
                });
            }
        }
    });
});

以及如何通过正文请求同时发送内容类型为application / json和multipart / form-data的请求，我想发送form和id:this.state.id