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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
CCPry JS类库 代码
Oct 30 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
微信小程序新手教程之启动页的重要性
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
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
js实现右键菜单功能
2016/11/28 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
初学python数组的处理代码
2011/01/04 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python有序字典简单实现方法示例
2017/09/28 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
采购主管工作职责
2013/12/12 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
高一化学教学反思
2014/02/05 职场文书
2014植树节活动总结
2014/03/11 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
高三毕业评语
2014/12/31 职场文书
2015年项目工作总结
2015/04/29 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js