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

时间:2018-09-23 04:11:12

标签: javascript node.js multer express-router

使用DropzoneJs使用Multer将文件上传到Node服务器时,我无法保存文件,也无法在控制台的req.filereq.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
}

这是我正在使用的节点/ Express /路由器:

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吗?

1 个答案:

答案 0 :(得分:0)

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

我采取的步骤:

  1. 我的浏览器控制台已在Chrome中打开到“网络”标签
  2. 上传文件
  3. 寻找了testmedia请求
  4. 在窗口底部有一个file[0]: (binary)的表单数据
  5. 在我的路线文件中,我使用了

    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!")
}

我还没有对文件做任何事情,但这是我的解决方案,体系结构有些不同,但是这个问题是关于上述步骤以及通过浏览器获取解决方案并在{{1 }}中的方法