摘要:默认地,表单数据会编码为。就是说,在发送到服务器之前,所有字符都会进行编码空格转换为加号,特殊符号转换为值。提交说明文件上传。图片选择图片地址上传上传。用表单直接构造对象就不需要下面的方法来为表单进行赋值了。
nodejs图片上传
nodejs一般开发网站基本都用express框架,本文也主要以express为例,讲解如何上传图片;
express本身没有上传图片功能;一般都是集成相应的模块;常用的有multer中间件和formidable中间件,前一个我配置的时候总是出错,所以pass;此处主要演示formidable的用法;
-表单提交;
-ajax提交;
表单提交代码如下:
Document
这里注意表单的enctype属性一定要是:multipart/form-data;
别忘了name属性;
这是html文档的讲解:
定义和用法
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)。
ajax提交:
formdata file jquery ajax upload
ajax上传主要用的是Jquery;这一块只是知道这么用;配置ajax的时候processData与contentType都设置为false;
还有此处用了HTML5的一个新特性;FormData;
用法如下:new FormData($("#myForm")[0]);
将这坨数据传到后端就可以了;
前端页面演示完了;下面是后端代码演示:var express = require("express"); var router = express.Router(); var formidable = require("formidable"), fs = require("fs"), TITLE = "formidable上传示例", AVATAR_UPLOAD_FOLDER = "/avatar/", domain = "http://localhost:3000"; /* 图片上传路由 */ router.post("/uploader", function(req, res) { var form = new formidable.IncomingForm(); //创建上传表单 form.encoding = "utf-8"; //设置编辑 form.uploadDir = "public" + AVATAR_UPLOAD_FOLDER; //设置上传目录 form.keepExtensions = true; //保留后缀 form.maxFieldsSize = 2 * 1024 * 1024; //文件大小 form.parse(req, function(err, fields, files) { if (err) { res.locals.error = err; res.render("index", { title: TITLE }); return; } console.log(files); var extName = ""; //后缀名 switch (files.fulAvatar.type) { case "image/pjpeg": extName = "jpg"; break; case "image/jpeg": extName = "jpg"; break; case "image/png": extName = "png"; break; case "image/x-png": extName = "png"; break; } if(extName.length == 0){ res.locals.error = "只支持png和jpg格式图片"; res.render("index", { title: TITLE }); return; } var avatarName = Math.random() + "." + extName; //图片写入地址; var newPath = form.uploadDir + avatarName; //显示地址; var showUrl = domain + AVATAR_UPLOAD_FOLDER + avatarName; console.log("newPath",newPath); fs.renameSync(files.fulAvatar.path, newPath); //重命名 res.json({ "newPath":showUrl }); }); }); module.exports = router;
图片传到后端其实就是一段2进制字符串,保存在内存中,需要用到fs模块读取后再写入到新的目录;打印files
{ fulAvatar: File { domain: null, _events: {}, _eventsCount: 0, _maxListeners: undefined, size: 106836, path: "public/avatar/upload_d75420a381af12d19db01599fd2d0b73.jpeg", name: "line.jpeg", type: "image/jpeg", hash: null, lastModifiedDate: 2016-12-19T15:22:47.896Z, _writeStream: WriteStream { _writableState: [Object], writable: false, domain: null, _events: {}, _eventsCount: 0, _maxListeners: undefined, path: "public/avatar/upload_d75420a381af12d19db01599fd2d0b73.jpeg", fd: null, flags: "w", mode: 438, start: undefined, autoClose: true, pos: undefined, bytesWritten: 106836, closed: true } } }
以上数据用fs模块读取path属性得到是就是一段2进制的字符串;
以上的示例基本就完成一些基本功能了;
疑惑就是网上一些jquery插件上传图片利用ajax,他们的原来是声明呢 ?希望有人给解释下
找到一篇相似的文章:
https://segmentfault.com/a/11...
补充:
var formData = new FormData(); var fileObj = document.getElementById("file_upload").files[0]; formData.append("fulAvatar", fileObj);
formData的两种用法一种是直接将表单dom直接塞进去,还有一种就是通过append填进去,但是这里要注意,填进去的是name和dom的files[0]属性;
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79631.html
摘要:后端程序配置因为是用自动生成的应用。允许进行跨域访问的方法,我们这里主要用到的是和两种方法。现在为止,先设置这些,后面还有具体路由的配置和认证等内容。所以,我一直用这个框架来构建网页样式。其中表的与表的设置为外键约束。 在上面一章中,我创建了前端的angular4框架程序和后端的nodejs-express框架程序,在这一章中,我准备对前后端程序进行一些简单的配置,然后将后台数据库创建...
摘要:多一个技能多一条出路,祝你在自学道路上越走越好,掌握自己的核心技能,不只是优秀,还要成为不可替代的人 NodeJs+Express+Mysql + Vuejs 项目实战 最近准备写一系列文章,全面讲述如何基于NodeJs + Express + Mysql + Vuejs 从零开发前后端完全分离项目; 文笔及技术可能在某些方面欠佳,请您指正,共同学习进步 前端:Vuejs全家桶 后端:...
阅读 2807·2021-11-25 09:43
阅读 959·2021-10-11 10:57
阅读 2462·2020-12-03 17:20
阅读 3695·2019-08-30 14:05
阅读 2391·2019-08-29 14:00
阅读 1976·2019-08-29 12:37
阅读 1637·2019-08-26 11:34
阅读 3181·2019-08-26 10:27