Dropzonejs 和 Node/Multer 照片上传未显示在服务器上。答案

【问题标题】：Dropzonejs and Node/Multer photo uploads are not showing on the server.Dropzonejs 和 Node/Multer 照片上传未显示在服务器上。
【发布时间】：2018-09-23 04:11:11
【问题描述】：

使用 DropzoneJs 将文件上传到使用 Multer 的节点服务器，我无法保存文件，也无法在控制台中的 req.file 或 req.files 对象中看到任何内容。

这里是 HTML，带有一些 EJS：

<div class="container">
    <div class="row dropzone_input_div">
        <h1 class="new_event_header">Add Your photos for <%= event.title %></h1>
        <div>
            <form class="dropzone needsclick dz-clickable" action="/testmedia" id="dropzoneFileUpload" name="mediaFile" enctype="multipart/form-data">
                <input type="text" value="<%= event._id %>" hidden name="id">
            </form>
        </div>
    </div>
    <div class="row">
        <div class="dropzone_preview">

        </div>
    </div>
</div>

这里是 Dropzone JS 文件：

Dropzone.options.dropzoneFileUpload={
    paramName: "media",
    parallelUploads: 30,
    uploadMultiple: true,
    autoProcessQueue: true
}

这是我正在使用的 Node/Express/Router：

const multer        = require('multer');
// const upload        = multer({dest:'uploads/'})
const async         = require('async');
const dotenv        = require('dotenv');

require('dotenv').config({silence:true});

const router = express.Router();
//Add Mongo Models to use Mongoose
const { Event, User, Moments, Instant } = require("../models");

const b2 = new B2({
    accountId: process.env.B2_MASTER_APPLICATION_KEY,
    applicationKey: process.env.B2_WRITE_APPLICATION_KEY
});

//router.use('/testmedia',upload.single('uploadedFile'))
router.use(multer({dest: 'uploads/'}).single('file'));

const uploads = (req,res,next) => {
    console.log("hit uploads yall!");
    console.log(req.file);
    next();
}


const testMedia = (req,res) => {
    console.log("hit testMedia route");
    res.send("File uplaoded!")
}

我的 console.log 文件如下所示...

hit uploads yall!
undefined
hit testMedia route
POST /testmedia 200 5.603 ms - 14

任何线索为什么我看不到这些文件？它们不会保存到我的服务器（Ubuntu）上的 /uploads 文件中，并且总是在控制台中显示undefined？

【问题讨论】：

我可能会尝试将文件附加到 FormData 对象，然后将其发布到 /testmedia developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
我在 html 中有 enctype="multipart/form-data" ，那不会做同样的事情吗？或者他们是不同的
同时查看请求和响应对象，我有 multi-art/form-data 作为类型。但是在搜索后，我在整个 req/res 中看不到相关的文件/媒体/表单/表单数据。

标签： javascript node.js multer express-router

【解决方案1】：

我的朋友 Eli，帮我解决了这个问题...

我采取的步骤：

让我的浏览器控制台在 Chrome 中打开到网络标签
上传了一个文件
寻找testmedia 请求
在窗口底部有一个带有file[0]: (binary) 的表单数据部分

在我的路由文件中我使用了这个

const express     = require('express');
const passport    = require('passport');
const crypto      = require('crypto');
const flash       = require('express-flash');
const xoauth2     = require('xoauth2');
const B2          = require('backblaze-b2');
const async       = require('async');
const multer      = require('multer');

const { User } = require("../models");

const {
    testMedia
} = require('../controllers/backblaze.controller')

const router = express.Router();


//*******************Middleware for Backblaze routes******************

const storeImage = multer.diskStorage({
    destination: (req,file,cb) => {
        cb(null, 'uploads/')
    },
    filename: (req,file,cb)=> {
        cb(null,file.fieldname + '-'+ Date.now())
    }
});

const upload = multer({storage:storeImage})

//*****THE ANSWER IS BELOW THIS LINE IN THE .single() method*****

router.post("/testmedia", upload.single('file[0]'), testMedia);
//router.post("/testmedia", upload.any(), testMedia);

我需要的函数在testMedia 的另一个文件夹中，看起来像这样

    const testMedia = (req,res) => {
console.log("hit testMedia route");
res.send("File uplaoded!")
}

我还没有对文件做任何事情，但这是我的解决方案，架构有点不同，但这个问题是关于上述步骤并通过浏览器获取解决方案并在 single('name') 中正确调用它multer中的方法

【讨论】：