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

Question

我在 back-end 上使用 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 无法将文件附加到请求 object.

这是中间件在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。这解决了问题。

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

How to upload a picture using feathers.js and multer?

javascript

node.js

express

feathersjs