node中图片文件上传方法总结（单个或多个图片文件上传）

最新推荐文章于 2023-08-25 19:19:06 发布

Mr-He

最新推荐文章于 2023-08-25 19:19:06 发布

阅读量793

点赞数

分类专栏：方法文章标签： nodejs

本文链接：https://blog.csdn.net/only__Y/article/details/108273767

版权

方法专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、下面这个博客说的挺好的，可以记录一下

express + multer 实现文件上传

我这里主要针对以上的博客内容说一下注意事项

在前台想要获取到上传后图片的url资源需要在app.js文件里加上一句：

app.use(express.static(__dirname));

二、这一个是我参考文献总结的内容：

1、首先在package.json文件中导入以下三个依赖

"fs": "^0.0.1-security",
"multer": "^1.4.2",
"path": "^0.12.7",

2、然后在你的图片上传的js文件中导入这三个模块

var multer = require("multer");
var fs = require("fs");
let path = require('path');

3、后台服务器的代码

//----------------------这里是单个图片上传的begin-----------------
//上传图片
const upload = multer({
	dest: "tmp/"
});
// 接受客户端上传的图片
router.post("/upload", upload.single("singleFile"), async (req, res) => {
	let imgFile = req.file; //获取图片上传的资源
	var service_detail_id = req.body.service_detail_id
	var tmp = imgFile.path; //获取临时资源
	let ext = path.extname(imgFile.originalname); //利用path模块获取 用户上传图片的 后缀名
	// console.log('ext',ext);
	let newName = "" + (new Date().getTime()) + Math.round(Math.random() * 10000) + "" + ext; //给用户上传的图片重新命名 防止重名
	// console.log(newName)
	let newPath = "../public/images/" + newName; //给图片设置存放目录  提前给当前文件夹下建立一个   images文件夹  ！！！！
	// console.log(newPath)
	let fileData = fs.readFileSync(tmp); //将上传到服务器上的临时资源 读取到 一个变量里面
	fs.writeFileSync(path.join(__dirname, newPath), fileData); //重新书写图片文件  写入到指定的文件夹下
	var notice_path = "http://127.0.0.1:3000/public/images/" + newName;
	var sql = `INSERT INTO room_img(img_url,room_id) VALUES(?,?)`
	await dataConnect(sql, [notice_path, service_detail_id], function(err, data) {
		if (err) {
			return console.log(err);
		}
		console.log("success");
	})
	res.send("写入图片成功!"); //上传成功之后  给客户端响应
})
//----------------------这里是单个图片上传的end-----------------

附上前台的测试请求代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="ajaxQuery()">发送文件上传请求</button>
		<input type="file" name="file" id="user" multiple/>
		<img src="" id="tx_img">
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function ajaxQuery() {
				console.log("开始进行ajax请求：")
				var fil = $("#user").get(0).files[0]
				var reader = new FileReader();
				reader.readAsDataURL(fil);
				reader.onload = function(f) {
					// var result = document.getElementById("result");
					// console.log(result)
					document.getElementById("tx_img").src = this.result;
				}
				console.log(fil)
				var formData = new FormData();
				formData.append("singleFile", fil);
				formData.append("service_detail_id", 11)
				$.ajax({
					url: "http://127.0.0.1:3000/upload", //请求的url地址
					dataType: "json", //返回格式为json
					contentType: false,
					processData: false,
					async: true, //请求是否异步，默认为异步，这也是ajax重要特性
					data: formData,
					type: "POST", //请求方式
					beforeSend: function() {
						//请求前的处理
					},
					success: function(req) {
						var user = req
						console.log(user)
						if (user.state == 200) {} else {}
						//请求成功时处理
					},
					complete: function() {
						//请求完成的处理
					},
					error: function() {
						//请求出错处理
					}
				});
			}
		</script>
	</body>
</html>

注意事项：前台请求的formData.append(“singleFile”, fil);的singleFile必须与后台的upload.single(“singleFile”)对应

Mr-He

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
node中图片文件上传方法总结（单个或多个图片文件上传）

一、下面这个博客说的挺好的，可以记录一下express + multer 实现文件上传我这里主要针对以上的博客内容说一下注意事项在前台想要获取到上传后图片的url资源需要在app.js文件里加上一句：app.use(express.static(__dirname));二、这一个是我参考文献总结的内容：1、首先在package.json文件中导入以下三个依赖"fs": "^0.0.1-security","multer": "^1.4.2","path": "^0.12.7",2
复制链接

扫一扫

专栏目录