将 dropzone 与 node.js 一起使用答案

【问题标题】：use dropzone with node.js将 dropzone 与 node.js 一起使用
【发布时间】：2018-07-18 13:31:02
【问题描述】：

我是 node.js 的新手，我试图通过拖放来上传文件，

我首先创建了一个简单的上传器（无需拖放）

像这样，它成功了：

    var http = require('http');
var formidable = require('formidable');

http.createServer(function (req, res) {
  if (req.url == '/fileupload') {
    var form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
      res.write('File uploaded');
      res.end();
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="filetoupload"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
}).listen(8080);

当我转到 http://localhost:8080/ 时，我可以看到上传者并且一切正常。

现在我正在尝试使用 dropzone 拖放来上传，而不是简单的上传，但我不知道如何让它工作

var http = require('http');
var formidable = require('formidable');

http.createServer(function (req, res) {
  if (req.url == '/fileupload') {
    var form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
      res.write('File uploaded');
      res.end();
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});

    res.write('<html><head><title>Dropzone </title><link href="dropzone.css" rel="stylesheet"></head><body><form method="post" action="/fileupload" id="uploader" enctype="multipart/form-data"><input name="file" type="file" multiple /><button>Save</button></form><script src="dropzone.js"></script></body></html>');

    return res.end();
  }
}).listen(8080);

现在，当我运行 $ node my-file.js 并转到 localhost:8080/ 时，我看到的是普通上传器，而不是 dropzone 上传器。

如果有人能帮我解决这个问题，我将不胜感激......

提前致谢

【问题讨论】：

您在表单中将action 属性保留为/
@Seblor thx，我修复了这个错误，但它仍然无法正常工作

标签： javascript node.js dropzone.js formidable

【解决方案1】：

你的 HTML 说：

<script src="dropzone.js"></script>

但是你的服务器端 JavaScript 的逻辑说：

如果 URL 是 /fileupload，则处理表单数据，否则向浏览器发送 HTML 页面。

所以当浏览器请求 JavaScript 文件时，你给它一个 HTML 页面。

您需要编写代码来提供浏览器实际要求的内容。

（提示：您的else 应该是生成404 Not Found 错误页面的代码。只为应该具有实际内容的URL 生成实际内容）。

【讨论】：

【解决方案2】：

出现简单上传，因为您需要在表单中包含“dropzone”类才能显示样式。

 res.write('<html><head><title>Dropzone </title><link href="http://cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.4/css/basic.css" rel="stylesheet"></head><body><form method="post" action="/fileupload"   class="dropzone" id="uploader" enctype="multipart/form-data"><button>Save</button></form><script src="http://cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.4/dropzone.js"></script></body></html>');

【讨论】：

谢谢，我以为我做到了，但显然我做错了！非常感谢