Kendo UI Angular 将文件作为 Node.JS 上传到后端

Question

我正在使用 Kendo Upload Control 将文件上传到使用 GridFS multer 的 Node.js 后端。

角度

<kendo-upload 
  [saveField]="file"
  [withCredentials]="false"
  [saveUrl]="uploadUrl"
  (autoUpload)="false"
  [multiple]="false"
  (select)="selectProfilePic($event)"></kendo-upload>

但是 node.js API 没有接收请求。我正在使用[saveField]="file" 传递上传的文件和下面的node.js。

var storage = new GridFsStorage({
    //url: mongoose.connection.client.s.url,
    //options: options,
    db: mongoose.connection,
    file: (req, file) => {
      return new Promise((resolve, reject) => {
        myCrypto.randomBytes(16, (err, buf) => {
          if (err) {
            return reject(err);
          }
          const filename = buf.toString('hex') + path.extname(file.originalname);
          const fileInfo = {
            filename: filename,
            bucketName: 'uploads'
          };
          resolve(fileInfo);
        });
      });
    }
  });



const upload = multer({ storage });
router.post('/upload', upload.single('file'), fileUpload);

module.exports = router;

function fileUpload(req, res) {

 console.log("fileUpload")
  try {
    res.send({ file: req.file })
  }
  catch(err){

    console.log(err);
    res.send(err)
  }
}

日志

2019-07-21T19:34:33.679205+00:00 app[web.1]：文件控制器 2019-07-21T19:34:33.680436+00:00 应用 [web.1]: {} 2019-07-21T19:34:33.983631+00:00 app[web.1]: MulterError: Unexpected 字段 2019-07-21T19:34:33.983647+00:00 应用 [web.1]：在 WrappedFileFilter (/app/node_modules/multer/index.js:40:19) 2019-07-21T19:34:33.983649+00:00 应用 [web.1]：在 Busboy。 （/app/node_modules/multer/lib/make-middleware.js:114:7） 2019-07-21T19:34:33.983650+00:00 应用 [web.1]：在 Busboy.emit (events.js:198:13) 2019-07-21T19:34:33.983670+00:00 应用 [web.1]：在 Busboy.emit (/app/node_modules/busboy/lib/main.js:38:33) 2019-07-21T19:34:33.983671+00:00 应用 [web.1]：在 PartStream。 (/app/node_modules/busboy/lib/types/multipart.js:213:13) 2019-07-21T19:34:33.983673+00:00 应用 [web.1]：在 PartStream.emit (events.js:198:13) 2019-07-21T19:34:33.983674+00:00 应用 [web.1]：在 标头解析器。 (/app/node_modules/dicer/lib/Dicer.js:51:16) 2019-07-21T19:34:33.983675+00:00 应用 [web.1]：在 HeaderParser.emit (events.js:198:13) 2019-07-21T19:34:33.983677+00:00 应用 [web.1]：在 HeaderParser._finish (/app/node_modules/dicer/lib/HeaderParser.js:68:8) 2019-07-21T19:34:33.983678+00:00 app[web.1]：在 SBMH。 (/app/node_modules/dicer/lib/HeaderParser.js:40:12) 2019-07-21T19:34:33.983679+00:00 应用 [web.1]：在 SBMH.emit (events.js:198:13) 2019-07-21T19:34:33.983680+00:00 应用 [web.1]：在 SBMH._sbmh_feed (/app/node_modules/streamsearch/lib/sbmh.js:159:14) 2019-07-21T19:34:33.983682+00:00 应用 [web.1]：在 SBMH.push (/app/node_modules/streamsearch/lib/sbmh.js:56:14) 2019-07-21T19:34:33.983683+00:00 应用 [web.1]：在 HeaderParser.push (/app/node_modules/dicer/lib/HeaderParser.js:46:19) 2019-07-21T19:34:33.983685+00:00 应用 [web.1]：在 Dicer._oninfo (/app/node_modules/dicer/lib/Dicer.js:197:25) 2019-07-21T19:34:33.983686+00:00 应用 [web.1]：在 SBMH。 (/app/node_modules/dicer/lib/Dicer.js:127:10) 2019-07-21T19:34:33.989908+00:00 heroku[路由器]: at=info method=POST path="/v1/file/upload" 主机=herokuapp.com request_id=aa1010df-d244-46bc-9b36-f8e437d5ad2a fwd="80.233.46.84" dyno=web.1 连接=0ms 服务=312ms 状态=500 字节=286 协议=https

Answer 1

您是否有可能将字段名称设置为某个 file 变量？因此，我相信您希望 [saveField]="file" 将字段名称设置为 'file' 字符串，但它会搜索一些 this.filevariable 即 undefined，因此您将字段名称设置为默认的 'files' 值？

Answer 2

遵循@GProst 的建议并进行了一些分析，以下修复有效，我还不知道解决方案。

根据Kendo UI angular documentation，

设置包含提交到saveUrl 的文件的FormData 键。 默认值为files。

所以，我只是将参数名称从 file 更改为 files 并且它起作用了。

const upload = multer({ storage });
router.post('/upload', upload.single('files'), fileUpload);