使用 dropzone 上传照片时显示错误答案

【问题标题】：Show errors when uploading photo with dropzone使用 dropzone 上传照片时显示错误
【发布时间】：2017-12-05 17:41:56
【问题描述】：

您好，我在 jquery 中上传图片时遇到问题。当我上传图片时，显示错误。我该如何解决这个问题？

我不能使用该表单来放置区域，因为它是另一种形式。错误：

POST http://localhost:3000/upload 400（错误请求）

对象{错误：对象}

代码html

<div class="dropzone" action="/upload"  encType="multipart/form-data" method='post' id="id_dropzone" >
<div class="dz-message">
  ِDrop file here to upload
</div>
 </div>

代码 JQUERY

  $(document).ready(function(){

    Dropzone.autoDiscover = false;

$("#id_dropzone").dropzone({addRemoveLinks: true, autoQueue: true,paramName: "file", maxFilesize: 2, maxFiles: 1,

    success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
              console.log(response);
        },
  maxThumbnailFilesize: 1,acceptedFiles: "image/*"  });
})

代码 app.js

    var express = require('express');
    var routes = require('./routes')();
    var fileUpload = require('express-fileupload');
    var path = require('path');
    var app = express();

    app.use(fileUpload());
    app.use('/files', express.static(__dirname + '/files'));
    .
    .
    .
    app.post('/upload', function(req, res) {
      var sampleFile;
      if (!req.files) {
        res.send('No files were uploaded.');
        return;
      }
      sampleFile = req.files;
      console.log(sampleFile);
      sampleFile.file.mv(__dirname + '/files/'+sampleFile.file.name, 
      function(err) {
        if (err) {
          console.log(err);
          res.status(500).send(err);
        } else {
        res.send('File uploaded!');
      }
    });
  });

package.json

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "connect-mongo": "~0.3.3",
    "ejs": "^2.5.6",
    "express": "^3.21.2",
    "express-fileupload": "^0.1.4",
    "mongoose": "~3.6.19"
  },
  "devDependencies": {
    "mocha": "~1.12.1",
    "should": "~1.2.2",
    "supertest": "~0.7.1"
  }
}

【问题讨论】：

标签： javascript jquery node.js image-uploading dropzone.js

【解决方案1】：

我根据您的代码制作了一个工作示例，但无法重现该错误。文件上传成功。

唯一的区别是我在document.ready 块之前移动了Dropzone.autoDiscover = false; 行。

这是基于您的代码的完整工作源

server.js

var express    = require('express');
var fileUpload = require('express-fileupload');
var path       = require('path');
var app        = express();

app.use(fileUpload());
app.use('/files', express.static(__dirname + '/files'));
app.use('/', express.static(__dirname + '/'));

app.post('/upload', function(req, res) {
  var sampleFile;
  if (!req.files) {
    res.send('No files were uploaded.');
    return;
  }
  sampleFile = req.files;
  console.log(sampleFile);
  sampleFile.file.mv(__dirname + '/files/' + sampleFile.file.name,
    function(err) {
      if (err) {
        console.log(err);
        res.status(500).send(err);
      } else {
        res.send('File uploaded!');
      }
    });
});


//init server
app.listen(3000, function() {
  console.log("Server running on port 3000");
});

index.html

<html>
<head>
  <script
      src="https://code.jquery.com/jquery-3.2.1.js"
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
      crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/dropzone.js"></script>
</head>
<body>
<div class="dropzone" action="/upload" encType="multipart/form-data" method='post' id="id_dropzone">
  <div class="dz-message">
    ِDrop file here to upload
  </div>
</div>
</body>
</html>
<script>
  Dropzone.autoDiscover = false;

  $(document).ready(function() {
    $("#id_dropzone").dropzone({
      addRemoveLinks: true, autoQueue: true, paramName: "file", maxFilesize: 2, maxFiles: 1,
      success: function(file, response) {
        var imgName = response;
        file.previewElement.classList.add("dz-success");
        console.log("Successfully uploaded :" + imgName);
      },
      error: function(file, response) {
        file.previewElement.classList.add("dz-error");
        console.log(response);
      },
      maxThumbnailFilesize: 1, acceptedFiles: "image/*"
    });
  })
</script>

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.15.3",
    "express-fileupload": "^0.1.4"
  }
}

【讨论】：

我无法理解这些错误的原因。我在另一个程序中使用此代码而不是错误。谢谢
当我删除 app.use(fileUpload()); ，不会发生错误 400。但文件不会上传。
您使用的是什么版本的 express 和 expres-fileupload？我已经用我的 package.json 编辑了我的答案。一切正常，我没有错误
我更新了 express 和 expres-fileupload 但仍然有错误。 (node:7100) DeprecationWarning: os.tmpDir() 已被弃用。请改用 os.tmpdir()。 POST /file-upload 400 13.520 ms - - 错误：流在 Form. (backend\node_modules\multiparty\ind ex.js:681:24) at emitNone (events.js:91:20) at Form 处意外结束.emit (events.js:188:7) 在 finishMaybe (backend\node_modules\readable-stream\lib _stream_writable.js:460:14) 在 endWritable (backend\node_modules\readable-stream\lib _stream_writable.js:469:3 ) .....
我修复了之前的错误，但是问题没有解决。 POST /file-upload 400 10.997 ms - - 错误：流在 Form. (backend\node_modules\multiparty\ind ex.js:681:24) at emitNone (events.js:110:20) at Form 处意外结束.emit (events.js:207:7) 在 finishMaybe (backend\node_modules\readable-stream\lib _stream_writable.js:460:14) 在 endWritable (backend\node_modules\readable-stream\lib _stream_writable.js:469:3 )

【解决方案2】：

我用下面的代码解决了这个问题。

app.js

var multiparty = require('multiparty');
const fs = require('fs');
var util = require('util');
.
.
.
    app.post('/file-upload', function(req,res){
      var form = new multiparty.Form({autoFiles:true });
      form.parse(req, function(err, fields, files) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        var oldpath = req.files.file.path;
        var newpath =  __dirname + '\\files\\' + req.files.file.name;
        var readStream = fs.createReadStream(oldpath);
        var writeStream = fs.createWriteStream(newpath);
        readStream.pipe(writeStream);
        res.end();
      });
      return;
   });

【讨论】：