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进行测试，它运行得很完美，所以这让我觉得它可能与中间件feat.js有关，可能会改变一些标题或其他东西，因此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

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

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

1 个答案: