使用ember-file-upload上传文件时持续出现404错误求助

使用GJS结合ember-file-upload上传文件到网站根目录时，始终返回404错误。文件可正常加入上传队列并触发上传尝试，但每次请求都会返回POST http://localhost:3000/ [HTTP/1.1 404 Not Found 9ms]，控制台提示“File upload failed...”。服务器使用Node Express 4.21.2，相关代码如下：

...
import { UploadFile } from 'ember-file-upload';
import FileQueueService from 'ember-file-upload/services/file-queue';
...
export class DialogUtil extends Component {
  @service('common-storage') z;
  @service intl;
...
  uploadPhoto = async (file) => {
    try {
      const response = await file.upload('/', {accepts: ['image/png', 'image/jpeg', 'image/tiff', 'image/gif']});
    } catch (response) {
      console.error(`File upload failed: ${response}`);
    }
  }
...
 <template>
    <dialog id="dialogUtil" style="width:min(calc(100vw - 2rem),auto);max-width:480px" {{on 'keydown' this.detectEscClose}} {{on 'mousedown' this.detectMouseDown}} {{on 'mouseup' this.detectMouseUp}}>
...
...
            {{#let (fileQueue name='photos' onFileAdded=this.uploadPhoto) as |queue|}}
              Files in queue: {{queue.files.length}}<br>
              {{t 'filesPassed' n=this.nPass}}<br>
              {{t 'filesFailed' n=this.nFail}}<br>
              <label>Choose files
                <input id="imUpLd" type="file" multiple {{queue.selectFile}}>
              </label>
            {{/let}}
...
...
    </dialog>
  </template>
}

1. 补充Express端的文件上传处理路由 #

404的核心原因是Express服务器未配置POST /路由来处理文件上传请求。根路径/通常默认响应GET请求（返回首页），不会处理POST上传，需手动添加路由并使用文件上传中间件（如multer）：

先安装multer：

npm install multer

在Express主文件中添加配置：

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const app = express();

// 配置文件存储规则
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    const uploadDir = './uploads';
    // 自动创建上传目录（如果不存在）
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
    }
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname); // 保留原文件名，可自定义命名规则
  }
});

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

// 配置POST /的上传路由，处理多文件上传
app.post('/', upload.array('photos'), function (req, res) {
  if (!req.files || req.files.length === 0) {
    return res.status(400).send('未上传任何文件');
  }
  res.status(200).send({ 
    message: '文件上传成功', 
    files: req.files.map(f => ({ name: f.originalname, path: f.path })) 
  });
});

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

2. 调整上传路径（更规范的实践） #

不建议用根路径处理上传，更合理的做法是指定专门的上传端点（如/upload），避免和首页路由冲突：

修改Ember端的uploadPhoto方法：

uploadPhoto = async (file) => {
  try {
    const response = await file.upload('/upload', {accepts: ['image/png', 'image/jpeg', 'image/tiff', 'image/gif']});
  } catch (response) {
    console.error(`File upload failed: ${response}`);
  }
}

对应Express路由改为：

app.post('/upload', upload.array('photos'), function (req, res) {
  // 处理逻辑同上
});

3. 确认存储目录权限 #

确保Express配置的存储目录（如./uploads）对Node进程有读写权限：

• Linux/macOS执行：chmod -R 755 ./uploads
• Windows直接在文件管理器中调整目录读写权限

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