将图像从客户端上传到NodeJS服务器并内部保存在服务器上？

Question

How I am able to upload an image from the client part, and send it by making an HTTP request(POST) to the sever(NodeJS) and save it internally on the server.

Be it Jquery use or XMLHttpRequest use or even form use, I stumble on the same problem, can't get the image on the sever side thus can't store it internally.

Code I've tried for the client side:

let img = document.createElement("img");
img.src = "./public/assets/img.png";
img.addEventListener("load", (e) => {
    addParkingSource(img);
});

function addParkingSource(image) {
    let blobFile = image;
    let formData = new FormData();
    formData.append("fileToUpload", blobFile);

    $.ajax({
        url: "http://localhost:8000/post-image",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {},
        error: function(jqXHR, textStatus, errorMessage) {
            console.log(errorMessage); // Optional
        }
    });

}

The sever side, I can't read it, whenever I try to read the data property of req(request) it gives empty object, but the Content-Length points to a number > 0, which means the image was sent successfully.

app.post("/post-image", function(req, res) {
    console.log(req.body);
});

Note: I have no issue with cors right now.

What I am doing wrong and how can I correctly do implement it?

Answer 1

I would suggest you to use multer npm package for file uploaded tasks.

https://github.com/expressjs/multer