全国服务热线:4008-888-888

行业新闻

小程序注册流程说明_NodeJS完成图片上传代码(Ex

NodeJS实现图片上传代码(Express)       本篇文章主要介绍了NodeJS实现图片上传代码(Express) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始。

页面样式

Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片:

上传图片样式:

 div 
 input type="file" name="fileToUpload" id="fileToUpload" / 
 /div 

CSS样式:

.upload-container {
 background-image: url(../../images/rv/add.jpg);
 background-repeat: no-repeat;
 width: 180px;
 height: 200px;
 padding-bottom: 10px;
 display: inline-block;
 vertical-align: middle;
 .fileupload {
 opacity: 0;
 filter: alpha(opacity=0);
 width: 200px;
 height: 200px;

Html点击上传有两种比较常用的方式iFrame上传和Ajax上传,本文采用了Ajax上传是HTML5提出了XMLHttpRequest对象的第二版,传递文件数据主要是通过FormData实现:

$('.fileupload').change(function(event) {
 /* Act on the event */
 if ($('.fileupload').val().length) {
 var fileName = $('.fileupload').val();
 var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
 if (extension == ".jpg" || extension == ".png") {
 var data = new FormData();
 data.append('upload', $('#fileToUpload')[0].files[0]);
 $.ajax({
 url: 'apply/upload',
 type: 'POST',
 data: data,
 cache: false,
 contentType: false, //不可缺参数
 processData: false, //不可缺参数
 success: function(data) {
 console.log(data);
 error: function() {
 console.log('error');

服务端保存

NodeJS服务端保存需要使用了第三方插件node-formidable,

npm install  

上传图片

var cacheFolder = 'public/images/uploadcache/'; br exports.upload = function(req, res) {
 var currentUser = req.session.user;
 var userDirPath =cacheFolder+ currentUser.id;
 if (!fs.existsSync(userDirPath)) {
 fs.mkdirSync(userDirPath);
 var form = new ingForm(); //创建上传表单
 form.encoding = 'utf-8'; //设置编辑
 form.uploadDir = userDirPath; //设置上传目录
 form.keepExtensions = true; //保留后缀
 form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
 form.type = true;
 var displayUrl;
 form.parse(req, function(err, fields, files) {
 if (err) {
 res.send(err);
 return;
 var extName = ''; //后缀名
 switch (files.upload.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.send({
 code: 202,
 msg: '只支持png和jpg格式图片'
 return;
 } else {
 var avatarName = '/' + Date.now() + '.' + extName;
 var newPath = form.uploadDir + avatarName;
 displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName;
 fs.renameSync(files.upload.path, newPath); //重命名
 res.send({
 code: 200,
 msg: displayUrl

不同用户上传置放在不同的位置,根据需求来设置,当然也有可以每张图片都给不同的id编号,推荐第三方uuid插件:

文件重命名:

fs.renameSync(files.upload.path, newPath); //重命名 

文件上传进度:

form.on('progress', function(bytesReceived, bytesExpected) {

有很多官方API还有很多设置的选项,本文根据需求设置了几项,有额外需求的可以参考官方地址~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服