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[]); // 上传的文件信息 var des_file = "./upload/" + req.files[].originalname;
fs.readFile( req.files[].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[].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’)去除就解决了这个问题
参考链接如:https://blog.csdn.net/gsying1474/article/details/52200445
node.js使用express框架进行文件上传的更多相关文章
- 使用Node.js的Express框架进行文件上传
我们先创建一个Express项目,要使用文件上传的功能还需要下载multer模块. npm install --save multer 下面我们在public文件夹下创建upload.html,内容如 ...
- node.js中 express + multer 处理文件上传
multer中间件,可以很方便的结合express处理用户表单上传的文件. 一.安装multer npm install multer 二.处理单个文件上传 const express = requi ...
- Node.js新手教程——怎样实现文件上传功能
作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...
- node.js之express框架
之前学习过node.js接触过express框架,最近为了编写一个mock server正好用到了express.下面正好就跟大家介绍一下关于express.今天的内容主要围绕这么几个方面? expr ...
- layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
- Bootstrap fileinput.js,最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- jersey框架实现文件上传
jersey框架是一个开源的RESTful的框架,实现了实现了JAX-RS规范,进一步地简化 RESTful service 和 client 开发.当然而且是必须的,jersey对文件的上传和下载也 ...
- 使用SpringMVC框架实现文件上传和下载功能
使用SpringMVC框架实现文件上传和下载功能 (一)单个文件上传 ①配置文件上传解释器 <!—配置文件上传解释器 --> <mvc:annotation-driven>&l ...
- 关于我使用spring mvc框架做文件上传时遇到的问题
非常感谢作者 原文:https://blog.csdn.net/lingirl/article/details/1714806 昨天尝试着用spring mvc框架做文件上传,犯了挺多不该犯的毛病问题 ...
随机推荐
- js 控制超出字数显示省略号
//多余显示省略号 function wordlimit(cname, wordlength) { var cname = document.getElementsByClassName(cname) ...
- 从项目需求角度,使用纯CSS方案解决垂直居中
CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...
- Linux 安装 lrzsz,使用 rz、sz 上传下载文件
yum install -y lrzsz 上传文件到服务器 rz 命令后会出现一个文件选择框,选择.确定即可 从服务器下载文件 sz 文件名即可
- Salesforce 自定义标签在代码中的应用
自定义标签简介 Salesforce 中自定义标签(Custom Label)的作用是存储一般性的文本,可以用于 Apex.Visualforce 页面.Lightning 组件等地方,用于显示提示信 ...
- python 爬虫爬取内容时, \xa0 、 \u3000 的含义
最近用 scrapy 爬某网站,发现拿到的内容里面含有 \xa0 . \u3000 这样的字符,起初还以为是编码不对,搜了一下才知道是见识太少 233 . \xa0 是不间断空白符 我们通常所用的 ...
- vue 构建项目 文件引入
1.vue引用依赖文件. 举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...
- https遇到自签名证书/信任证书
对于CA机构颁发的证书Okhttp默认支持 可以直接访问 但是对于自定义的证书就不可以了(如:https ://kyfw.12306.cn/otn/), 需要加入Trust 下面分两部分来写,一是信任 ...
- Testlink1.9.17使用方法(第六章 测试计划制定)
第六章 测试计划制定 QQ交流群:585499566 在TestLink系统中,一个完整的测试计划包括:集成测试阶段.系统测试阶段. 一. 创建测试计划 1,点击主页上[测试计划管理] 2,在“测试计 ...
- Javascript数组系列二之迭代方法1
我们在<Javascript数组系列一之栈与队列 >中介绍了一些数组的用法.比如:数组如何表现的和「栈」一样,用什么方法表现的和「队列」一样等等一些方法,因为 Javascript 中的数 ...
- Python笔记(十七):生成器
(一)生成器(Generator) Python生成器是创建迭代器的简单方法.简单来说,生成器是一个函数,它返回一个我们可以迭代的对象(迭代器)(一次一个值). 因为下面会用到列表生成式,这里先说明下 ...