Question

我是新来的人。我正在尝试上传并显示图像。我正在使用mongodb将multer的图像路径存储在nodejs中，所以我成功地管理了上载图像，正在使用Robot 3t。我可以看到图像的路径已上传。

但是现在当我尝试从react访问图像的路径时，我在chrome控制台中收到此错误：

获取http://localhost:3000/api/FichesPatients/uploads/57852721_310708826272290_1281173974004269056_n.png 401（未经授权）

请帮忙吗？

使用multer从后端nodejs在uploads文件夹内进行上传的代码：

const obj1 = {pm: 'val 1', dm: 'val 2', cm: 'val 3'}
const obj2 = {pm: 'price', dm: 'discount', cm: 'cost'}

const res = Object.fromEntries(
                Object.entries(obj1)
                     .map(([k,v]) => [(obj2[k] || k), v])
            )

console.log(res)

使用profileimage发布新的fiche Patient的代码：

const multer = require("multer");
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, "./uploads/");
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname);
  }
});
const fileFilter = (req, file, cb) => {
  // reject a file
  if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
    cb(null, true);
  } else {
    cb(null, false);
  }
};
const upload = multer({
  storage: storage
});

app.use("/uploads", express.static("uploads"));

这是上传文件的代码：

app.post(
  "/api/FichesPatients/Nouveau",
upload.single("file"),
 async function(req, res, next) {
    try {
      console.log(req.file);
      let fichePatient = await db.FichePatient.create({
        email: req.body.email,
        nom: req.body.nom,
        prenom: req.body.prenom,
        cin: req.body.cin,
        profileImageUrl: req.file.path,
        gender: req.body.gender,
        adresse: req.body.adresse,

        tel: req.body.tel,
        dateNaissance: req.body.dateNaissance,
        creator: req.userId
      });


      return res.status(200).json(fichePatient);
    } catch (err) {
      return next(err);
    }
  }
);

要显示有关fiche患者的信息，请使用此功能

this.state = {
profileImageUrl: ""}

  onChangeHandler(event) {
    console.log(event.target.files[0]);
    this.setState({
      profileImageUrl: event.target.files[0],
      loaded: 0
    });
  }
  onClickHandler = () => {
    const data = new FormData();
    data.append("file", this.state.profileImageUrl);
    axios
      .post("/api/FichesPatients/Nouveau", data, {
        // receive two  parameter endpoint url ,form data
      })
      .then(res => {
        // then print response status
        console.log(res.statusText);
      });
  };

  <input
            type="file"
            name="profileImageUrl"
            onChange={this.onChangeHandler}
          />
          <button
            type="button"
            class="btn btn-success btn-block"
            onClick={this.onClickHandler}
          >
            Upload
          </button>

使用此路线：

exports.afficherFichePatient = async function(req, res, next) {
  try {
    // let message = await db.Message.findById(req.params.message_id);
    let fichePatient = await db.FichePatient.findById(
      req.params.fichePatient_id
    ).populate("creator", {
      nomD: true
    });
    return res.status(200).json(fichePatient);
  } catch (err) {
    return next(err);
  }
};

，而反应显示部分是这样的：

app.post(
  "/api/FichesPatients/");

对于我的猫鼬模式是这样的：

componentDidMount() {
    axios
      .get("/api/FichesPatients/" + this.props.match.params.id)
      .then(response => {
        this.setState({
          nom: response.data.nom,
          prenom: response.data.prenom,
          gender: response.data.gender,
          profileImageUrl: response.data.profileImageUrl,
          cin: response.data.cin,
          adresse: response.data.adresse,
          tel: response.data.tel,
          email: response.data.email
        });
      })
      .catch(function(error) {
        console.log(error);
      })}

<MDBCardImage
                className="mx-auto hoverable d-block  rounded-circle"
                src={this.state.profileImageUrl}
                width="100px"
                height="130px"
              />

如何从上载文件夹中导入文件以及在mongoose模式中存储的路径

0 个答案: