nodejs 处理前端上传来的图片到服务器

刚接触 nodejs，前几天搞了几天图片上传这块，今天终于搞通了，记录一下，日后再看

前端代码:

<div class="am-form-group am-form-file">
												<div class="tpl-form-file-img">
													<img id="uploadImg" src="assets/img/slide-2.jpg" alt="">
												</div>
												<button type="button" class="am-btn am-btn-danger am-btn-sm">
													<i class="am-icon-cloud-upload"></i> 添加封面图片</button>
												<input id="file" type="file" name="file" multiple="multiple" />
</div>





$("#file").change(function() {
				$("#uploadImg").attr("src", URL.createObjectURL($(this[0].files[0]));
				// 获取file域里的图片信息
				file = this.files;
				formData = new FormData();
				for (var i = 0; i < file.length; i++) {
					file = this.files[i];
					formData.append("file", file);
				}
				//创建formdata对象
				$.ajax({
					url: baseUrl + "/api/image",
					type: 'POST',
					data: formData,
					cache: false, //上传文件不需要缓存
					processData: false, // 告诉jQuery不要去处理发送的数据
					contentType: false, // 告诉jQuery不要去设置Content-Type请求头
					success: function(data) {
						$("#uploadImg").attr("imgurl", baseUrl + data.data);
					}
				})
			});

着重 讲解一下nodejs 这块处理

首先我们引入
 

var formidable = require('formidable');

var path = require("path");

var fs = require("fs");

 

这三个模块具体功能童鞋们可以百度或者官方文档自行查看

然后开始处理

后端服务器整体处理

const handleBlogRouter = require("./src/router/blog")
const handleUserRouter = require("./src/router/user")
// 引入 http 模块：http 是提供 Web 服务的基础
const http = require("http");

// 引入 url 模块：url 是对用户提交的路径进行解析
const url = require("url");

// 引入 qs 模块：qs 是对路径进行 json 化或者将 json 转换为 string 路径
const qs = require("querystring");

var express = require('express');

var router = express.Router();

var fs = require("fs");

// 设置返回格式 JSON
const serverHandle = (req, res) => {
	// 设置 cors 跨域
	res.setHeader("Access-Control-Allow-Origin", "*");
	// 设置 header 类型
	res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
	// 跨域允许的请求方式
	res.setHeader('Content-Type', 'application/json');

	req.path = url.parse(req.url, true).pathname

	// 获取请求参数，增加true后会转换成一个对象
	req.query = url.parse(req.url, true).query

	const blogResult = handleBlogRouter(req, res)
	if (blogResult) {
		return
	}
	const userResult = handleUserRouter(req, res)
	if (userResult) {
		return
	}
}

// 获取当前时间
function getNowFormatDate(){
	var date = new Date();
	var year = date.getFullYear(); // 年
	var month = date.getMonth() + 1; // 月
	var strDate = date.getDate(); // 日
	var hour = date.getHours(); // 时
	var minute = date.getMinutes(); // 分
	var second = date.getMinutes(); // 秒
	if (month >= 1 && month <= 9) {
		month = "0" + month;
	}
	if (strDate >= 0 && strDate <= 9) {
		strDate = "0" + strDate;
	}
	// 返回 yyyy-mm-dd hh:mm:ss 形式
	var currentdate = year + "-" + month + "-" + strDate + " " + hour + ":" + minute + ":" + second;
	return currentdate;
}

module.exports = serverHandle

命中路由：

//图片上传
		if (method === "POST" && req.path === "/api/image") {
			var form = new formidable.IncomingForm();
	form.encoding = 'utf-8';
	form.uploadDir = path.join("/teacher/upload");
	form.keepExtensions = true; //保留后缀
	form.maxFieldsSize = 2 * 1024 * 1024;
	//处理图片 
	console.log(form.uploadDir)
	form.parse(req, function(err, fields, files) { 
		var filename = files.file.name 
		var nameArray = filename.split('.');
		var type = nameArray[nameArray.length - 1];
		var name = '';
		for (var i = 0; i < nameArray.length - 1; i++) {
			name = name + nameArray[i];
		}
		var date = new Date();
		var time = '_' + date.getFullYear() + "_" + date.getMonth() + "_" + date.getDay() + "_" + date.getHours() + "_" +
			date.getMinutes();
		var avatarName = name + time + '.' + type;
		var newPath = form.uploadDir + "/" + avatarName;
		fs.renameSync(files.file.path, newPath); //重命名
		res.write(JSON.stringify({
			code: "200",
			message: "成功",
			data: "/upload/" + avatarName
		}));
		res.end();
	})
		}

有时间在深入分析，不明白的童鞋可以联系我 lg1012.cn