Dropzonejs 和 Node/Multer 照片上传未显示在服务器上。
Dropzonejs and Node/Multer photo uploads are not showing on the server.
使用 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
知道为什么我看不到这些文件吗?它们不会保存到我服务器上的 /uploads 文件中 (Ubuntu),并且总是在控制台中显示 undefined
?
我的朋友 Eli 帮我解决了这个问题...
我采取的步骤:
- 我的浏览器控制台在Chrome中打开到网络选项卡
- 上传了一个文件
- 查找了
testmedia
请求
- 在 window 的底部有一个带有
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
中的方法
使用 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
知道为什么我看不到这些文件吗?它们不会保存到我服务器上的 /uploads 文件中 (Ubuntu),并且总是在控制台中显示 undefined
?
我的朋友 Eli 帮我解决了这个问题...
我采取的步骤:
- 我的浏览器控制台在Chrome中打开到网络选项卡
- 上传了一个文件
- 查找了
testmedia
请求 - 在 window 的底部有一个带有
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