如何从 MERN 客户端更新 MongoDB 记录

Question

I am trying to implement code to let users change their profile pic via updating a URL in mongoDB Atlas. The user enters the URL into a form then presses a button next to it. here is the code for the route that should be reached on the press of a button:

changeProfilePic.js

const router = require("express").Router();
const User = require("../models/user.model");

router.put('/', (req, res, next) => {
        const id = req.user.id
        const query = {$set:{image: 'https://i.imgur.com/Geb0OcA.png'}}
        User.findByIdAndUpdate(id, query, {new: true, useFindAndModify: false})
        .then()
});

module.exports = router

When I put in a specific URL here ( 'https://i.imgur.com/Geb0OcA.png' ), it updates correctly, but I can't seem to figure out what I need to replace the hard coded URL with to get the informtion the user typed in the form on the client side arbitrarily.

Here is the relevant routing code in server.js:

const changeProfilePicRouter = require("./routes/changeProfilePic");
app.use("/api/changeProfilePic", changeProfilePicRouter);

here is the user schema:

user.model.js

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const userSchema = new Schema(
  {
    googleId: {
      type: String,
    },
    username: {
      type: String,
      required: true,
      unique: true,
      trim: true,
      minlength: 3,
    },
    password: {
      type: String,
      trim: true,
    },
    email: String,
    image: {type: String, default: 'https://i.imgur.com/Geb0OcA.png'},
    date: {type: Date, default: Date.now},
    tps: {type: Number, default: 0},
  },

);

const User = mongoose.model("User", userSchema);

module.exports = User;

Here is a component with an axios function to go to the changeProfilePic route on button press:

changeProfilePic.component.js

import React, { useState } from "react";
import Axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Form, Col } from "react-bootstrap";

function HookChangeProfilePic() {
  const [profilePicSrc, setProfilePicSrc] = useState("");

  const changeProfilePic = () => {
    Axios({
      method: "PUT",
      data: {
        image: profilePicSrc
      },
      withCredentials: true,
      url: "/api/changeProfilePic",
    }).then((window.location.href = "/profile")).catch((err) => console.log(err));
  };

  return (
    <div>
      <Form className="m-0">
        <Form.Row className="justify-content-md-center m-4">
          <Col xs="auto">
            <Form.Control
              onChange={(e) => setProfilePicSrc(e.target.value)}
              type="text"
              placeholder="Enter Image Src"
            />
          </Col>

          <Button variant="warning" onClick={changeProfilePic}>
            Update Profile Picture
          </Button>
        </Form.Row>
      </Form>
    </div>
  );
}

export default HookChangeProfilePic;

I am using Passport.js for authorization

sorry if i am missing any relevant code or informtion! I'm not trying to be lazy with my question, I just don't know what is important to show. I can quickly edit and add more stuff if needed.

I have checked the solutions to other questions that were similar to mine (that I could find) and none of them have helped so far.

Answer 1

In changeProfilePic.js, you should add/change the following code:

const express = require('express')
const router = express.Router();
const User = require("../models/user.model");

router.use(express.json());
router.use(express.urlencoded({extended: true}))

router.put('/', (req, res, next) => {
        const id = req.user.id
        const update = {$set:{image: req.body.image}}
        User.findByIdAndUpdate(id, query, {new: true, useFindAndModify: false})
        .then()
});

module.exports = router

Lines 1 and 5-6 are some config assuming you are using express 4.x (otherwise, you should install body-parser, and change express to body-parser after requiring it).

Line 9 uses req.body. Read more about it at http://expressjs.com/en/4x/api.html#req.body

Edit: If you don't already, you should also have something like res.status(200).send() at the end to send the response back