express 中的 multer 进行图片上传,全站都用了 csrf,不过每次图片上传时都报“Error: invalid csrf token”错误,代码在正文中!

2017-11-15 21:21:56 +08:00
 DeHoo

描述一下问题:如果去掉enctype="multipart/form-data",就不会报“ Error: invalid csrf token ”错误,加上enctype后就报这个错误了。

请各位大大,帮我看一下,要怎么弄,才能不报 csrf 错误,其他的表单都能正常用,只差这个图片上传功能一直无法使用,都整了两天了,硬是无法弄好。

html 代码:

<div class="col-md-10 del-padding">
    <form class="form-horizontal" action="/user/upload" method="POST" enctype="multipart/form-data">
        <div class="thumbnail text-center">
            <img src="/public/Images/default.jpg" class="img-thumbnail">
            <div class="upload-box">
                <label class="file"><input type="file" name="avatar" id="file"></label>
            </div>
        </div>
        <div class="form-group text-center">
            <input type="hidden" name="_csrf" value="yNzdpalm-6yF_T2yfNPhO1wFB56ogwSaOQSE" />
            <button type="submit" class="btn btn-primary">保存修改</button>
        </div>
    </form>
</div>

js 代码:

var express = require("express");
var fs = require('fs');
var path = require("path");
var multer  = require('multer');
var router = express.Router();
router.post('/upload', function(req, res, next) {
	function mkdirsSync(dirname, mode){
		if(fs.existsSync(dirname)){
			return true;
		}else{
			if(mkdirsSync(path.dirname(dirname), mode)){
				fs.mkdirSync(dirname, mode);
				return true;
			}
		}
	}
	mkdirsSync(uploadFolder, 0755);
	var uploadFolder = process.cwd()+'/public/upload/Face';

	var storage = multer.diskStorage({
		destination: function (req, file, cb) {
			cb(null, folder); //save upload folder
		},
		filename: function (req, file, cb) {
			cb(null, file.fieldname + '-' + Date.now());//rename filename
		}
	});
	var upload = multer({ storage: storage }).single('avatar');
	upload(req, res, function (err) {
		if (err) {
			return next(err);
		}
		console.log(req.file);
		req.flash('success_message', '恭喜你,头像上传成功!');
		return res.redirect('back');
	});
});
1376 次点击
所在节点    问与答
1 条回复
whypool
2017-11-15 21:48:54 +08:00
需要理解一下 express 的中间件,上传文件这个中间件不是这样用的;

构造函数:

constructor() {

/**
* 上传图片到缓存
*/
this.storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, process.cwd() + '/public/tmp/')
},
filename: function (req, file, cb) {
let name = file.originalname.substr(file.originalname.lastIndexOf('.'), file.originalname.length);
cb(null, Date.now() + name)
},
fileFilter: function fileFilter(req, file, cb) {
if (file.mimetype.substring(0, 'image'.length) == 'image') {
cb(null, true);// 接受这个文件
} else {
cb(null, false);// 拒绝这个文件
}
}
});

this.upload = multer({
storage: this.storage,
limits: {
fileSize: 1024 * 1024 * 10 //10m
}
});
}



中间价使用:

router.post('/upload-img', uploader.upload.single('editorImg'), (req, res) => {
req.file

});

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/406735

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX