通过带有 express 的 nodejs 使用 "vaadin file upload"(polymer) 时出错

Question

我正在尝试使用 vaadin 文件上传元素上传一个简单的文件（参考 https://vaadin.com/elements/-/element/vaadin-upload）

我正在使用 nodejs 并用 multer 表达作为服务器端的中间件。

nodejs简化代码如下：

var express =   require("express");
var multer  =   require('multer');
var app         =   express();
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now());
  }
});
var upload = multer({ storage : storage}).single('userPhoto');

app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});

app.post('/api/photo',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

我尝试在我的 index.html 中使用 HTML 元素并且此代码有效

<form id        =  "uploadForm"
     enctype   =  "multipart/form-data"
     action    =  "/api/photo"
     method    =  "post"
>
<input type="file" name="userPhoto" />
<input type="submit" value="Upload Image" name="submit">
</form>

但我想使用 vaadin 上传元素。我写了代码

<link rel="import" href="../bower_components/vaadin-upload/vaadin-upload.html">

<vaadin-upload id="userPhoto" target="/api/photo"></vaadin-upload>

当我使用它时，它没有按预期工作。我能够看到 vaadin 元素。但是我无法上传文件。当我 select 文件时，服务器响应字符串 'Error uploading file'。我对 polymerjs 和网络开发还很陌生。有人可以指出我哪里出错了吗？

Answer 1

在您的后端代码中，您必须将文件参数名称从 'userPhoto' 更改为 'file'。

如果是原生 HTML 形式，它会在 <input type="file"> 的 name 属性声明的参数中发送一个文件。

使用 Vaadin 上传元素时，文件的发送方式与 HTML 表单相同。但它们不是提供的 name，而是在名为 "file".

的参数中发送的

请注意，您具有用于上传的 id="userPhoto" 属性。 id 是一个不同的属性，它不像 name.

很遗憾，上传请求的文件参数名称目前无法轻松自定义。我们计划在未来添加更多上传请求自定义功能。

通过带有 express 的 nodejs 使用 "vaadin file upload"(polymer) 时出错

Error in using "vaadin file upload"(polymer) via nodejs with express

file-upload

vaadin

node.js

express

polymer