node.js使用express框架进行文件上传详解
关于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
效果图如下:
express非常有人性化，已经告诉你怎么进入blog项目及其安装相关的库依赖和启动了，你只需按照它的这个步骤，一步一步来就行了
b.目录结构分析示意图如下所示:
- app.js:——启动文件，也可以说是主文件入口。
- package.json——定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
- node_modules——存放package.json中安装的模块，当你在package.json添加依赖的模块并安装后，存放在这个文件夹下
- public——存放image、css、js等文件
- routes——存放路由文件
- views——存放视图文件或者说模板文件
- bin——存放可执行文件
2.使用express框架进行文件上传
注意，目录结构如下所示(我主要是复用最近研究的mock-github-api):
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.上传文件及其效果页面图:
上传成功显示图:
upload文件夹下会有对应的文件(也就是你刚刚通过页面上传的文件)
最后例子中还有阿里云和腾讯云的图片存储，大家可以做一个参考。
源码地址为: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”的使用，将其去除，则没有问题了
还有其他一些原因，这里暂时没有遇到，就不多做解释了，
相关推荐
-
nodejs+express实现文件上传下载管理网站
nodejs+express-实现文件上传下载管理的网站 项目Github地址:https://github.com/qcer/updo 后端:基于nodejs的express的web框架. 前端:bootstrap框架+vuejs.jquery等js库 功能点: dronzone.js实现文件拖拽上传.下载,可自定义传输容量. vuejs实现表格双向数据绑定. jquery.form.min.js表单插件,升级表单,实现表单提交回调. 纯css+jQuery实现一键返回顶部. 简单的ajax异
-
详解nodejs实现本地上传图片并预览功能（express4.0+）
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览.前端采用通过ajax方式上传文件,使用FormData进行ajax请求 ,nodejs端采用multiparty模块 相关查看文档: 通过Ajax
-
Ajax异步文件上传与NodeJS express服务端处理
为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形(库文件可能造成多余的开销,拉低应用加载速度,尤其是在引入库文件之后仅使用其中一两个功能的情况下,性价比极低),最近了解了一下文件异步上传的实现原理,顺带看了看进度条.图片预览等功能的实现,做一点简单的整理. 文件上传 HTML结构如下,一个file input和一个button.当点击"上传"按钮的时候,将file input选中的文件上传到服务器. <input type="file"
-
Nodejs+express+html5 实现拖拽上传
一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j
-
Node.js + express实现上传大文件的方法分析【图片、文本文件】
本文实例讲述了Node.js + express实现上传大文件的方法.分享给大家供大家参考,具体如下: 对于大文件的上传我们首先要引入一个叫做 multer 的库: npm install --save multer 关于这个库,大家可以查阅官方文档: 点击跳转 https://www.npmjs.com/package/multer 我们先将库引入我们的项目中: var multer = require('multer') var upload = multer({ dest: 'upload
-
nodejs基于express实现文件上传的方法
本文实例讲述了nodejs基于express实现文件上传的方法.分享给大家供大家参考,具体如下: 前段时间在做个人项目的时候,用到了nodejs服务端上传文件,现在回头把这个小结一下,作为记录. 本人上传文件时是基于express的multiparty ,当然也可以使用connect-multiparty中间件实现,但官方似乎不推荐使用connect-multiparty中间件.废话不多说,下面看代码吧. 步骤: (1)使用express创建项目,默认使用的是jade模板引擎,但是还是习惯于ht
-
node.js（express）中使用Jcrop进行图片剪切上传功能
需求说明 简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像. 第一步,选择图片: 第二步,在弹窗页面中展现并进行裁切: 第三步,点击"保存",上传服务器. 实现过程 说来有点坎坷,相当于做了2遍,走了弯路. 第1遍是用户一选择图片,就进行了上传,然后返回一个地址,所以在弹层上展现的图片已经是服务器上的图片了,然后进行裁切,再保存. 第2遍找到的一个方法,是在第1遍做到裁切处理时候想到的,即弹层展现的是用户机器上选择的图片,不用先上传,但是用image/base64
-
Nodejs进阶：基于express+multer的文件上传实例
概览 图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持. 常用的开源组件有multer.formidable等,借助这两个开源组件,可以轻松搞定图片上传. 本文主要讲解以下内容,后续章节会对技术实现细节进行深入挖掘. 基础例子:借助express.multer实现单图.多图上传. 常用API:获取上传的图片的信息. 进阶使用:自定义保存的图片路径.名称. 环境初始化 非常简单,一行命令. npm install express multer multer --sav
-
使用nodejs+express实现简单的文件上传功能
1.建立express项目 express -e nodejs-uploadfile 2.下载multer中间件 npm i multer or yarn multer 3.在routes/index.js中引用multer,由于还要使用到文件操作,还要引用fs模块,并指定文件上传目录 const multer = require('multer'); const fs = require('fs'); const UPLOAD_PATH = './uploads' 单文件上传: index.h
-
NodeJS实现图片上传代码(Express)
文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始. 页面样式 Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片: 上传图片样式: <div class="upload-container"> <input type="file" name="fileToUpload&q
-
使用express+multer实现node中的图片上传功能
下文给大家介绍使用express+multer实现node中的图片上传功能,具体内容介绍如下所示: 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在node中使用multer中间件来对上传路由接口进行处理 multer文档 package.json html部分 <body> <div class="form-group"> <label>File input