图像上传功能在部署的 Heroku 应用程序上不起作用，但在 Localhost 上起作用？

Question

So I created my first big project: https://rate-n-write.herokuapp.com/

In brief, this is a blog app where the user can write reviews and publish them along with pictures.

I have used firebase as the database to store the articles. The app is working fine on localhost. Whenever I am trying to upload an image on Heroku, I get this error

The error is showing up in line number 8 of the following code (editor.js):

uploadInput.addEventListener('change', () => {
    uploadImage(uploadInput, "image");
})

const uploadImage = (uploadFile, uploadType) => {
    const [file] = uploadFile.files;
    if(file && file.type.includes("image")){
        const formdata = new FormData();
        formdata.append('image', file);

//Error shows up here in the fetch line
        fetch('/upload', {
            method: 'post',
            body: formdata
        }).then(res => res.json())
        .then(data => {
            if(uploadType == "image"){
                addImage(data, file.name);
            } else{
                bannerPath = `${location.origin}/${data}`;
                banner.style.backgroundImage = `url("${bannerPath}")`;
            }
        })
        const change_text = document.getElementById("uploadban");
        change_text.innerHTML = " ";
    } else{
        alert("upload Image only");
    }
}

This is just a snippet of the whole editor.js file.

Is it because I am trying to upload the file to the project directory? (server.js snippet below):

app.post('/upload', (req, res) => {
    let file = req.files.image;
    let date = new Date();
    // image name
    let imagename = date.getDate() + date.getTime() + file.name;
    // image upload path
    let path = 'public/uploads/' + imagename;

    // create upload
    file.mv(path, (err, result) => {
        if(err){
            throw err;
        } else{
            // our image upload path
            res.json(`uploads/${imagename}`)
        }
    })
})

Do I need to use an online storage service like AWS S3?

Answer 1

Heroku is not suitable for persistent storage of data, the uploaded pictures would be deleted after a while (when the dyno is restarted) read this .

I would suggest using 3rd party object Storage services like cloudinary or AWS S3