在Heroku中使用Filepond：server属性的有效路径是什么？

Let's break down why this is happening and how to fix it—Heroku's /tmp works differently than your local machine, and your current FilePond config is missing a key piece of the puzzle.

Why the 503 Happens #

Your local setup lets you access /tmp directly because your web server is configured to serve files from that directory, but Heroku doesn't do this by default. When you set server="/tmp" in FilePond, the frontend tries to send uploads to your-app.herokuapp.com/tmp, but there's no backend route or static file handler for that path. Heroku responds with a 503 because it doesn't know how to handle that request.

Plus, even if you fixed the routing, Heroku's /tmp is per-dyno and ephemeral: any files stored there will be deleted when your dyno restarts (which happens on deployments, auto-scaling, or after 24 hours of inactivity). This makes it a bad fit for persistent file storage in production.

Step-by-Step Fixes #

1. Replace Direct /tmp Server with a Backend Upload Endpoint

Instead of pointing FilePond directly to /tmp, create a dedicated API endpoint to handle uploads. Update your FilePond config:

<file-pond 
  :allow-multiple="true" 
  :accepted-file-types="['application/pdf']" 
  server="/api/upload" 
/>

2. Build the Backend Upload Handler

Here's an example using Node.js/Express (adjust for your stack):

• Install a file upload middleware like multer
• Write a route to accept uploads and store them temporarily (or directly to cloud storage)

const express = require('express');
const multer = require('multer');
const router = express.Router();

// Use Heroku's temp directory (equivalent to /tmp, but using env var is safer)
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, process.env.TMPDIR || '/tmp');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });

router.post('/upload', upload.single('file'), (req, res) => {
  // If you need to let the frontend access the file, return a URL to a static endpoint
  res.json({
    url: `/api/files/${req.file.filename}`
  });
});

// Add a static file route to serve files from /tmp
router.get('/files/:filename', (req, res) => {
  const filePath = `${process.env.TMPDIR || '/tmp'}/${req.params.filename}`;
  res.sendFile(filePath);
});

module.exports = router;

3. Use Persistent Cloud Storage (Production-Grade Fix)

Since Heroku's /tmp is temporary, you'll want to upload files directly to a cloud storage service like AWS S3, Cloudinary, or Google Cloud Storage instead. FilePond has official plugins for most of these services, which let you skip the backend upload step entirely and send files straight to the cloud.

For example, with the S3 plugin:

• Install the plugin
• Configure it with your S3 credentials (store these in Heroku environment variables!)
• Update FilePond to use the S3 server instead of a local path

Key Notes #

• Never rely on Heroku's /tmp for permanent file storage—it's only for short-lived, temporary files.
• Heroku environment variables (like TMPDIR) are the safest way to reference system paths, instead of hardcoding /tmp.
• The 503 error was a routing issue, not a permission problem—your server just didn't have a handler for the /tmp path.

内容的提问来源于stack exchange，提问作者Chad Taylor