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

Question

我正在尝试实现代码，让用户通过更新 mongoDB Atlas 中的 URL 来更改他们的个人资料图片。用户在表单中输入 URL 然后按下旁边的按钮。这是按下按钮后应到达的路线代码：

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

当我在此处输入特定的 URL ('https://i.imgur.com/Geb0OcA.png') 时，它会正确更新，但我似乎无法弄清楚我需要什么来替换硬编码的 URL 用于获取用户在客户端任意输入表单的信息。

这里是server.js中的相关路由代码：

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

这是用户架构：

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;

这是一个具有 axios 功能的组件，可以在按下按钮时转到 changeProfilePic 路由：

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;

我正在使用Passport.js进行授权

抱歉，如果我遗漏了任何相关代码或信息！我并不是想偷懒我的问题，我只是不知道要展示什么是重要的。如果需要，我可以快速编辑和添加更多内容。

我已经检查了与我的（我能找到的）类似的其他问题的解决方案，其中 none 到目前为止对我有所帮助。

Answer 1

在changeProfilePic.js中，您应该add/change以下代码：

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

第 1 行和第 5-6 行是一些配置，假设您使用的是 express 4.x（否则，您应该安装 body-parser，并在需要后将 express 更改为 body-parser）。

第 9 行使用 req.body。在 http://expressjs.com/en/4x/api.html#req.body

阅读更多相关信息

编辑：如果你还没有，你还应该在末尾有类似 res.status(200).send() 的东西来发回响应

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

How do I update MongoDB records from client side in MERN

mongoose

node.js

express

mern

axios