使用 Multer 上传图像（本地有效，但部署在 Heroku 上时无效）

Question

我的博客应用程序有点卡住了。

当我在本地运行它时它工作正常，但是当它部署到 Heroku 时，似乎通过 Multer 上传的图像没有上传到我的图像文件夹中

当我从 Heroku 应用程序创建帖子时，我可以创建帖子 - 但图片丢失了

下面是我的服务器代码

const path = require("path");
const db = require('./config/connection');
const multer = require('multer')

const routes = require('./routes');

const app = express()
const PORT = process.env.PORT || 5000

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

app.use("/images", express.static(path.join(__dirname, "./images")));

const storage = multer.diskStorage({
    destination: (req, file, callback) => {
        callback(null, 'images')
    },
    filename: (req, file, callback) => {
        callback(null, req.body.name)
    }
})

const upload = multer({ storage: storage })
app.post('/upload', upload.single('file'), (req, res) => {
    res.status(200).json('File has been uploaded')
})

if (process.env.NODE_ENV === 'production') {
    app.use(express.static("client/build"));
}

app.use(routes)

db.once('open', () => {
    app.listen(PORT, () => {
        console.log(`API server running on port ${PORT}!`);
    });
});

下面是我的客户端代码

import React, { useContext, useState } from 'react';
import './write.css';
import { Context } from '../../context/Context';

export default function Write() {
    const [title, setTitle] = useState('')
    const [description, setDescription] = useState('')
    const [file, setFile] = useState('')
    const { user } = useContext(Context)

    const handleSubmit = async (e) => {
        e.preventDefault()
        const newPost = {
            username: user.username,
            title, 
            description,
        }
        if(file){
            const data = new FormData()
            const filename = Date.now() + file.name
            data.append('name', filename)
            data.append('file', file)
            newPost.postPicture = filename
            try {
               await axios.post('/upload', data)
            } catch (error) {
                console.log(error)
            }
        }
        try {
            const response = await axios.post('/posts', newPost)
            window.location.replace('/posts/'+response.data._id)
        } catch (error) {
            console.log(error)
        }
    }
    return (
        <div className='write'>
            {file && 
            <img 
                className='write_image' 
                src={URL.createObjectURL(file)} 
                alt="" 
                />
            }
            <form className='write_form' onSubmit={handleSubmit}>
                <div className='write_form_group'>
                    <label htmlFor='file_input'>
                        <i className='write_icon far fa-plus-square'></i>
                    </label>
                    <input type='file' id='file_input' style={{display: 'none'}} onChange={e=>setFile(e.target.files[0])} />
                    <input type='text' placeholder='Title' className='write_input' onChange={e=>setTitle(e.target.value)}/>
                </div>
                <div className="write_form_group">
                    <textarea placeholder='Tell your story...' type='text' className='write_input write_text' onChange={e=>setDescription(e.target.value)}></textarea>
                </div>
                <button className='write_submit' type='submit'>Publish</button>
            </form>
        </div>
    )
}

我不确定出了什么问题，我的大脑被指向我使用 multer.diskStorage 的服务器端代码（也许当应用程序托管在某处时这不起作用？）

任何建议都会很棒

这里还有我的 github 上整个存储库的链接...因为我觉得只看这些帖子中的代码可能很难理解

https://github.com/Wickette/wickettes_blog

Answer 1

Heroku 不允许你这样做。您需要在 Amazon 的 S3 服务或其他类似服务上创建一个存储桶才能上传该存储桶。

Answer 2

您还可以使用 cloudinary，它易于使用，也是一项免费服务。

Answer 3

Multer 是一个上传图像的选项，无需额外费用 请清除这个问题，我也遇到了 sa.e 问题，我在托管商部署前端和后端图像已成功上传，但未在前端获取图像