将 dropzone 与 node.js 一起使用

Question

我是 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 上传器。

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

提前致谢

Answer 1

你的 HTML 说：

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

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

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

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

您需要编写能够提供浏览器实际要求的代码。

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

Answer 2

显示简单上传，因为您需要在表单中包含 "dropzone" class 才能显示样式。

 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>');

将 dropzone 与 node.js 一起使用

use dropzone with node.js

javascript

node.js

formidable

dropzone.js