不断显示上传的图片 React答案

【问题标题】：constant display of uploaded image React不断显示上传的图片 React
【发布时间】：2021-06-17 17:49:16
【问题描述】：

我有一个显示静态图像的页面。我想在那里显示我刚刚上传的图像。为此，我在我的服务器上使用 express-fileUpload 实现了文件上传，它工作正常，它获取照片并将其保存到一个文件夹中，但我无法在我的页面上显示它（页面刷新后它消失）。我怎样才能让这个图像在刷新后仍然存在？

server.js 代码：

require('dotenv').config()
const express = require('express')
const mongoose = require('mongoose')
const cookieParser = require('cookie-parser')
const Years = require('./models/yearModel')
const Users = require('./models/userModel')
const bcrypt = require("bcrypt");
const cors = require('cors')
const fileUpload = require('express-fileupload')

const app = express()
app.use(express.json())
app.use(cors())
app.use(cookieParser())
app.use(fileUpload())

app.post('/upload', (req, res) => {
    if (req.files === null) {
      return res.status(400).json({ msg: 'No file uploaded' });
    }

    const file = req.files.file;
    const fileName = "orar.jpg"+file.name

    file.mv(`${__dirname}/client/public/uploads/${fileName}`, err => {
      if (err) {
        console.error(err);
        return res.status(500).send(err);
      }

      res.json({ fileName: file.name, filePath: `/uploads/${file.name}` });
    });
  });


const PORT = process.env.PORT || 5000 
app.listen(PORT, () => {
    console.log('Server running on port: ', PORT)
})

这是我要显示图像的页面代码（不带返回标记）：

const Orar = () => {

const [file, setFile] = useState("");
const [filename, setFilename] = useState("Choose File");
const [uploadedFile, setUploadedFile] = useState({});

const onChange = (e) => {
  setFile(e.target.files[0]);
  setFilename(e.target.files[0].name);
};

const onSubmit = async (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append("file", file);

  try {
    const res = await axios.post("/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      }
    });

    const { fileName, filePath } = res.data;

    setUploadedFile({ fileName, filePath });

    setMessage("File Uploaded");
  } catch (err) {
    if (err.response.status === 500) {
      setMessage("There was a problem with the server");
    } else {
      setMessage(err.response.data.msg);
    }

  }
};

【问题讨论】：

标签： javascript node.js reactjs express

【解决方案1】：

我不知道你的网站和数据库的架构，所以如果你只在你的网站中存储一张图片，你可以将上传图片的 id 存储在浏览器本地存储中：link here（我不推荐这个练习）。

一个好的做法是将您上传的图片的 id 或路径存储在数据库中。例如，如果您想编辑或显示个人资料图片，请转到您的用户架构（在您的数据库中），在此处存储上传图像的 id 或路径。然后，当您调用 @GET /users/:userId 时，您将检索图像 ID 或图像路径（取决于您存储的图像）。

如果您检索到图片的链接，只需在您的 html 代码中执行此操作：

   <img src={myImageLocation} alt={myImageAlt} />

如果您将图像存储在专用服务器上（这就是您正在做的事情），您只能检索图像 id 并像这样渲染图像：

<img src={`${serverPATH}/${imageId}`} alt={myImageAlt} />

【讨论】：