javascript - 如何使用feathers.js和multer上传图片？

Question

我在后端使用feathers.js，在前端使用React，我需要实现一种上传图片的方法。我正在使用multer来处理上传(我也尝试过使用busboy)，但我似乎无法上传实际的图片，或者至少无法在req.file上访问它。

在客户端我有:

<form method="post" enctype="multipart/form-data" action="/picture/upload">
  <input type="file" name="avatar" />
  <input type="submit" value="Submit" />
</form>

在/src/middleware/index.js中我有:

'use strict';

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

const handler = require('feathers-errors/handler');
const notFound = require('./not-found-handler');
const logger = require('./logger');
var multer = require('multer');
const upload = multer({ dest: '../../client/img'});

module.exports = function() {
  // Add your custom middleware here. Remember, that
  // just like Express the order matters, so error
  // handling middleware should go last.

  const app = this;

  app.post('/picture/upload', upload.single('avatar'), uploadPicture(app));
  app.use(notFound());
  app.use(logger(app));
  app.use(handler());
};

这是src/middleware/uploadPicture.js:

'use strict';

module.exports = function(app) {
  return function(req, res, next) {
    console.log('req.file', req.file);
    console.log('req.body', req.body);

  };
};

req.file 始终未定义，并且 req.body 确实包含我上传的图像的名称。

我尝试在一个基本的 Express 项目上使用 mutler 和 Busboy 进行测试，它运行得很好，所以这让我觉得它可能与feathers.js 使用的中间件有关，并且可能它更改了一些 header 或其他内容，因此 multer 无法将文件附加到请求对象。

这是在 src/app.js 中定义中间件的顺序，这是运行服务器实例的位置:

app.use(compress())
  .options('*', cors())
  .use(cors())
  .use('/', serveStatic( app.get('client') ))
  .use(bodyParser.json())
  .use(bodyParser.urlencoded({ extended: true }))
  .configure(hooks())
  .configure(rest())
  .configure(services)
  .configure(middleware);

对于如何处理这种情况下的图像上传有什么想法吗？

Answer 1

我正在使用react，所以enctype不是supported HTML attribute 。我应该在我的表单中使用 encType 。这解决了问题。