刚接触 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