node.js使用express框架进行文件上传详解


Posted in Javascript onMarch 03, 2019

关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究。

目前的研究算是取得的比较好的进展。

Settings-Sync中通过快捷键上传文件,其实主要还是请求后端接口。

于是我便使用node.js模拟一个服务,这个服务其实就相当于github api(Settings-Sync实际请求的接口,比如token验证,gist存储创建等都是来自github 对应的api)。

话不多说,直接代码贴起讲解:

1.创建一个node.js项目(这里我以express框架为例)

关于如何创建一个node.js项目我就不详细说,通常通过npm init就可以创建一个node.js项目了。
关于node.js项目详细教程,可以参考该篇文章nodeJS入门——新建一个项目及代码详解
当然了,如果你是直接通过这篇文章操作,最先可能会报这个错误,错误信息如下:

'express' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

解决方式很简单,并不是npm install -g express就可以的,在此之前还需执行npm install -g express-generator

这条命令很好理解,你可以将其理解为你的express框架生成器,以Java中Maven来说,通常ide就把maven结构都弄好了,你只需在创建项目的时候,勾选maven即可,它会自己将所有相关项目包括配置文件一起生成。

虽然说我将地址贴出来,但是我觉得还是实际操作一遍,这样对此有一个感性认识(初学编程的人或者是已经有编程经验的人,是绝对不能忽略这一点的)。

流程如下:

a.使用express命令创建express项目

express blog

效果图如下:

node.js使用express框架进行文件上传详解

express非常有人性化,已经告诉你怎么进入blog项目及其安装相关的库依赖和启动了,你只需按照它的这个步骤,一步一步来就行了

b.目录结构分析示意图如下所示:

node.js使用express框架进行文件上传详解

  • app.js:——启动文件,也可以说是主文件入口。
  • package.json——定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
  • node_modules——存放package.json中安装的模块,当你在package.json添加依赖的模块并安装后,存放在这个文件夹下
  • public——存放image、css、js等文件
  • routes——存放路由文件
  • views——存放视图文件或者说模板文件
  • bin——存放可执行文件

2.使用express框架进行文件上传

注意,目录结构如下所示(我主要是复用最近研究的mock-github-api):

node.js使用express框架进行文件上传详解

a.准备html文件

public文件夹主要放置静态文件,如index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>文件上传</title>
</head>
<body>
 <h3>文件上传:</h3>
 选择一个文件上传: <br />
 <form action="/gists" method="post" enctype="multipart/form-data">
  <input type="file" name="content" />
  <br />
  <input type="submit" value="上传文件" />
 </form>
 
</body>
</html>

b.编写相关的js

像upload.js属于路由,通常放置在routes文件夹下

var fs = require('fs');
var express = require('express');
var multer = require('multer');
var path = require('path');
var router = express.Router();

var upload = multer({dest: 'upload_tmp/'});

router.post('/', upload.any(), function(req, res, next) {
 console.log(req.files[0]); // 上传的文件信息

 var des_file = "./upload/" + req.files[0].originalname;
 fs.readFile( req.files[0].path, function (err, data) {
  fs.writeFile(des_file, data, function (err) {
   if( err ){
    console.log( err );
   }else{
    response = {
     message:'File uploaded successfully',
     filename:req.files[0].originalname
    };
    console.log( response );
    res.end( JSON.stringify( response ) );
   }
  });
 });
});

module.exports = router;

c.上传文件及其效果页面图:

node.js使用express框架进行文件上传详解

 

上传成功显示图:

node.js使用express框架进行文件上传详解

upload文件夹下会有对应的文件(也就是你刚刚通过页面上传的文件)

node.js使用express框架进行文件上传详解

最后例子中还有阿里云和腾讯云的图片存储,大家可以做一个参考。

源码地址为:https://github.com/developers-youcong/mock-github-api

希望能够对大家有所启发和帮助

注意,可能遇到的问题:

问题一:静态资源需要放行,否则无法访问
在index.js补充这段代码即可解决这个问题

app.use(express.static(path.join(__dirname, 'public')))

问题二:socket hang up

我将var bodyParser = require(‘body-parser')去除就解决了这个问题

错误信息:ERROR: { [Error: socket hang up] code: 'ECONNRESET' }

分析原因:由于某种原因,导致http目标地址建立socket连接的时候出错
错误解决:经过对比查找,发现我这里nodejs项目中有对中间件“body-parser”的使用,将其去除,则没有问题了
还有其他一些原因,这里暂时没有遇到,就不多做解释了,

Javascript 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
了解重排与重绘
May 29 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
微信小程序新手教程之启动页的重要性
Mar 03 #Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 #Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 #Javascript
JS+php后台实现文件上传功能详解
Mar 02 #Javascript
JS事件绑定的常用方式实例总结
Mar 02 #Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 #Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 #Javascript
You might like
PHP中使用BigMap实例
2015/03/30 PHP
PHP生成唯一订单号
2015/07/05 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
javascript中的this详解
2014/12/08 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
js中日期的加减法
2015/05/06 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
VUE 使用中踩过的坑
2018/02/08 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
vue组件系列之TagsInput详解
2020/05/14 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
化学教师自荐信范文
2013/12/28 职场文书
元旦联欢会感言
2014/03/04 职场文书
《老山界》教学反思
2014/04/08 职场文书
学生安全责任书
2014/04/15 职场文书
小学教师培训方案
2014/06/09 职场文书
跑操口号
2014/06/12 职场文书
初婚未育证明样本
2014/10/24 职场文书
纪委立案决定书
2015/06/24 职场文书
班主任工作总结范文
2015/08/13 职场文书
使用pytorch实现线性回归
2021/04/11 Python