Multer Image 未在 Production Build React 上加载？答案

【问题标题】：Multer Image Not loaded on Production Build React?Multer Image 未在 Production Build React 上加载？
【发布时间】：2020-11-25 03:03:27
【问题描述】：

我正在使用 MERN 创建简单的电子商务当我处于生产模式时遇到错误。文件上传到指定文件夹，但前端没有加载。

服务器.js

import path from 'path'
import express from 'express'
import dotenv from 'dotenv'

const __dirname = path.resolve()

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '/frontend/build')))

  app.get('*', (req, res) =>
    res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'))
  )
} else {
  app.get('/', (req, res) => {
    res.send('Api running....')
  })
}

app.use('/uploads', express.static(path.join(__dirname, '/uploads')))

上传路线和代码

import path from 'path'
import express from 'express'
import multer from 'multer'

const router = express.Router()
const storage = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, '/uploads')
  },
  filename(req, file, cb) {
    cb(
      null,
      `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
    )
  },
})

function checkFileType(file, cb) {
  const filetypes = /jpg|jpeg|png/
  const extName = filetypes.test(path.extname(file.originalname).toLowerCase())
  const mimeType = filetypes.test(file.mimetype)

  if (extName && mimeType) {
    return cb(null, true)
  } else {
    cb('Images only with jpg, jpeg, png ')
  }
}

const upload = multer({
  storage,
  fileFilter: function (req, file, cb) {
    checkFileType(file, cb)
  },
})

router.post('/', upload.single('image'), (req, res) => {
  res.send(`/${req.file.path}`)
})

export default router

当我检查它在 src 上显示的文件时，图像无法加载检查图像=>

现在，当我处于开发模式时，相同的代码可以按预期工作并加载图像。可能出现的错误请帮助我。 在此先感谢您。

【问题讨论】：

标签： node.js express multer

【解决方案1】：

您的生产服务器不打算存储文件，因为这会导致服务器资源消耗的增加。因此它会自动删除您上传到生产服务器的所有文件/图像。

为什么要将文件存储在生产服务器上，只需使用数据库或文件存储系统，如 s3 存储桶。

【讨论】：

我已经解释过了，你还想知道什么？
我的意思是我该怎么做？
您可以根据需要使用 mongodb Atlas 来存储您的图像（它提供高达 500mb 的可用空间）。

【解决方案2】：

我遇到了同样的错误，我所做的只是将上传文件夹的位置切换到顶部。您要确保在 build 前端请求任何图像之前所有图像都可用。

import path from 'path'
import express from 'express'
import dotenv from 'dotenv'

const __dirname = path.resolve()
// Put it here
app.use('/uploads', express.static(path.join(__dirname, '/uploads')))

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '/frontend/build')))

  app.get('*', (req, res) =>
    res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'))
  )
} else {
  app.get('/', (req, res) => {
    res.send('Api running....')
  })
}

【讨论】：