Node.js模拟浏览器文件上传示例

OSChina上发过了,那个也是我的,现在放到这来,哈哈

这段代码只能一次上传一个文件~~


代码如下:

var path=require("path");
var fs=require("fs");
var http=require("http");

//post值payload
var getfield=function(field, value) {
return 'Content-Disposition: form-data; name="'+field+'"\r\n\r\n'+value+'\r\n';
}

//文件payload
var getfieldHead=function (field, filename) {
var fileFieldHead='Content-Disposition: form-data; name="'+field+'"; filename="'+filename+'"\r\n'+'Content-Type: '+getMime(filename)+'\r\n\r\n';
return fileFieldHead;
}
//获取Mime
var getMime=function (filename) {
var mimes = {
'.png': 'image/png',
'.gif': 'image/gif',
'.jpg': 'image/jpeg',
'.jpeg': 'image/jpeg',
'.js': 'appliction/json',
'.torrent': 'application/octet-stream'
};
var ext = path.extname(filename);
var mime = mimes[ext];
mime=!!mime?mime:'application/octet-stream';
return mime;
}
//获取边界检查随机串
var getBoundary=function() {
var max = 9007199254740992;
var dec = Math.random() * max;
var hex = dec.toString(36);
var boundary = hex;
return boundary;
}
//获取boundary
var getBoundaryBorder=function (boundary) {
return '--'+boundary+'\r\n';
}
//字段格式化
function fieldPayload(opts) {
var payload=[];
for(var id in opts.field){
payload.push(getfield(id,opts.field[id]));
}
payload.push("");
return payload.join(getBoundaryBorder(opts.boundary));
}

//post数据
function postRequest (opts) {
filereadstream(opts,function (buffer) {
var options=require('url').parse(opts.url);
var Header={};
var h=getBoundaryBorder(opts.boundary);
var e=fieldPayload(opts);
var a=getfieldHead(opts.param,opts.file);
var d="\r\n"+h;
Header["Content-Length"]=Buffer.byteLength(h+e+a+d)+buffer.length;
Header["Content-Type"]='multipart/form-data; boundary='+opts.boundary;
options.headers=Header;
options.method='POST';
var req=http.request(options,function(res){
var data='';
res.on('data', function (chunk) {
data+=chunk;
});
res.on('end', function () {
console.log(res.statusCode)
console.log(data);
});
});
req.write(h+e+a);log.diy(h+e+a+buffer+d);
req.write(buffer);
req.end(d);
});

}
//读取文件
function filereadstream(opts, fn) {
var readstream = fs.createReadStream(opts.file,{flags:'r',encoding:null});
var chunks=[];
var length = 0;
readstream.on('data', function(chunk) {
length += chunk.length;
chunks.push(chunk);
});
readstream.on('end', function() {
var buffer = new Buffer(length);
for(var i = 0, pos = 0, size = chunks.length; i < size; i++) {
chunks[i].copy(buffer, pos);
pos += chunks[i].length;
}
fn(buffer);
});
}

//各类设置
var opt={
"url":"http://xxxx.xx",//url
"file":"00.jpg",//文件位置
"param":"file",//文件上传字段名
"field":{//其余post字段
"client":"1",
"title":"ok"
},
"boundary":"----WebKitFormBoundary"+getBoundary()
}

postRequest(opt);
/*
------WebKitFormBoundaryuzKmkAovUuYsQ1Dt\r\n

Content-Disposition: form-data; name="file"; filename="00.jpg"\r\n
Content-Type: application/octet-stream
\r\n
\r\n +file\r\n

------WebKitFormBoundaryuzKmkAovUuYsQ1Dt\r\n

Content-Disposition: form-data; name="fieldName"
\r\n
\r\n +value\r\n

------WebKitFormBoundaryuzKmkAovUuYsQ1Dt--
*/

最后这个注释的是标准格式“\r\n”代表实际的字符串,为了看着舒服,视觉上也调整一下

(0)

相关推荐

  • node文件上传功能简易实现代码

    找了不少文件上传的相关模块,最后选择了比较常用,并且是express推荐使用的 multer 来实现文件上传,附上 GitHub地址 1. 开始 开始第一步,自然就是安装模块,不多说 npm install multer --save 这里简单说一下,因为文件上传是用 post 方法提交数据,所以上传的单文件或者多文件会作为一个 body 体添加到请求对象中,我们可以通过 req.file 或者 req.files 查看上传后文件的相关信息. 以单文件上传为例,req.file 返回一个对象:

  • 在Node.js中使用HTTP上传文件的方法

    开发环境 我们将使用 Visual Studio Express 2013 for Web 作为开发环境, 不过它还不能被用来做 Node.js 开发.为此我们需要安装 Node.js Tools for Visual Studio.  装好后 Visual Studio Express 2013 for Web 就会转变成一个 Node.js IDE 环境,提供创建这个应用所需要的所有东西..而基于这里提供的指导,我们需要: 下载安装 Node.js  Windows 版,选择适用你系统平台的

  • Node.js实现文件上传

    在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件, 用nodejs的话, 相当于模拟浏览器的行为. google 了一番之后, 明白了浏览器无非就是利用http协议来给服务器传输数据, 具体协议就是<RFC 1867 - Form-based File Upload in HTML>, 在浏览器上通过form 表单来上传文件就是通过这个协议,我们可以先看看浏览器给服务端发送了什么数据, 就可以依葫芦画瓢的把上传功能实现出来.说起form 表单上传

  • Nodejs实现文件上传的示例代码

    笔者用nodejs做项目时需要用到文件上传的功能,在网上搜索了很多教程,找到了一个express的中间件,用于处理 multipart/form-data 类型的表单数据,可以很方便的将表单中的文件数据保存到服务器. 介绍 简单的用法 定义存储器 Multer作为express的一个中间件,我们可以很方便的自定义上传的文件目录以及保存的文件名.先看一个最简单的用法, demo1地址 : var express = require('express'); var multer = require(

  • node.js文件上传处理示例

    直入主题,在Node.js web 开发基本框架的前提下,我们来做一个文件上传功能 上传的handler比较简单,网上都能找到 var url=require('url'); var exec=require('child_process').exec; var querystring=require('querystring'); /********************************文件上传 第3方模块测试*************************/ function f

  • 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使用formidable实现文件上传

    最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实现文件的上传功能.该小demo用到了MySQL数据库,所有的数据都存放到了数据库中.下面简单说一些如何使用. 1.创建app.js主文件 const express = require('express'); const router = require('./router'); const pat

  • Node.js实现兼容IE789的文件上传进度条

    Nodejs对文件上传的处理 在Express4里req.files已经是undefined了:现在用的最多的可能就是formidable了,你知道了它有个progress事件,于是心中大喜,低版本IE的进度条有戏了:OK,试一下: form .on('error',function(err){ console.log(err); }) .on('aborted',function(){ console.log('aborted'); }) .on('progress',function(byt

  • Node.js模拟浏览器文件上传示例

    OSChina上发过了,那个也是我的,现在放到这来,哈哈 这段代码只能一次上传一个文件~~ 复制代码 代码如下: var path=require("path"); var fs=require("fs"); var http=require("http"); //post值payload var getfield=function(field, value) { return 'Content-Disposition: form-data; n

  • Ajax 配合node js multer 实现文件上传功能

    说明 作为一个node 初学者,最近在做一个聊天软件,支持注册.登录.在线单人.多人聊天.表情发送.各种文件上传下载.增删好友.聊天记录保存.通知声开关.背景图片切换.游戏等功能,所以用到了multer 模块,经过各种查文档,做demo例子,终于成功实现单个文件上传功能,支持大部分文件格式上传,同时显示到网页上 效果 是不是有种微信即视感,没错,就是根据网页版微信来做的, 要实现整体效果的话,要配合css和html来做,前端初学者,第一次发博客,实在捉急,近期,将会将代码放到github上去,感

  • 使用AjaxFileUpload.js实现异步文件上传示例

    ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: 复制代码 代码如下: <input type="file" name="upload" hidden="hidden" id="file_u

  • Node层模拟实现multipart表单的文件上传示例

    有时候就是有这样的需求,Nodejs做webserver,从浏览器端上传文件到后端服务器,Node层只是做一个数据中转,如果在这个过程中,Node webserver需要对数据进行适当加工,然后再Post到后端,那么就得在Node层模拟文件上传了. 首先,通过浏览器上传文件,PostData格式是长着个样子的: 屏幕快照 2014-11-22 下午9.18.45.png 如图,每一组数据其实就是用"-----WebkitFormBoundary....."分隔开的,最后再用这个分隔符结

  • node+axios实现服务端文件上传示例

    目录 一.接口文档介绍 二.文件上传 2-1.初始化项目 2-2.安装插件依赖 2-3.上传核心代码 2-4.执行脚本 最近调研企业wx集成H5应用,其中有一个发送图文消息,需要上传图片到临时素材库.之前做过文件上传到阿里云.七牛云都是服务端提供封装好的文件上传接口,在客户端使用ajax的方式上传.所以就来踩踩坑,使用node+axios实现服务端文件上传. 一.接口文档介绍 请求方式:POST(HTTPS) 请求地址:https://qyapi.weixin.qq.com/cgi-bin/me

  • Node.js连接mongo数据库上传文件的方法步骤

    目录 效果 初始化 model 下创建index.js用于连接数据库时的信息 修改app.js文件里的信息 router下修改user.js文件 创建上传文件保存文件夹 在public下新建一个index.html 用于请求时的主页面 效果 初始化 创建项目文件夹mondo-express 安装包 npm i express-generator -g(作用一键生成项目列表) 在项目文件夹mondo-express用终端打开输入npx express-generator自动生成项目目录 安装包 终

  • 在Koa.js中实现文件上传的接口功能

    文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片.上传Excel等. 那么在Node Koa应用中如何实现一个支持文件上传的接口呢? 本文从环境准备开始.最后分别用 Postman 和一个HTML页面来测试. 01-环境准备 首先当然是要初始化一个Koa项目了,安装 Koa.koa-router 即可. npm install koa koa-router 设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 public 文件夹,目录结构如下: koa-upload/

  • SpringMvc MultipartFile实现图片文件上传示例

    整理文档,搜刮出一个SpringMvc MultipartFile实现图片文件上传示例,稍微整理精简一下做下分享. spring-servlet.xml <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver&qu

  • 如何基于js管理大文件上传及断点续传详析

    目录 前言 前端结构 后端结构(node + express) 基于FormData实现文件上传 基于BASE64实现文件上传 BASE64具体方法 前端生成文件名传给后端 上传进度管控 大文件上传 服务端代码(大文件上传+断点续传) 总结 前言 前端小伙伴们平常在开发过程中文件上传是经常遇到的一个问题,也许你能够实现相关的功能,但是做完后回想代码实现上是不是有点"力不从心"呢?你真的了解文件上传吗?如何做到大文件上传以及断电续传呢,前后端通讯常用的格式,文件上传进度管控,服务端是如何

  • Spring Boot实现文件上传示例代码

    使用SpringBoot进行文件上传的方法和SpringMVC差不多,本文单独新建一个最简单的DEMO来说明一下. 主要步骤包括: 1.创建一个springboot项目工程,本例名称(demo-uploadfile). 2.配置 pom.xml 依赖. 3.创建和编写文件上传的 Controller(包含单文件上传和多文件上传). 4.创建和编写文件上传的 HTML 测试页面. 5.文件上传相关限制的配置(可选). 6.运行测试. 项目工程截图如下: 文件代码: <dependencies>

随机推荐