文档章节

axios上传文件,nodejs接收保存

开源中国首席劝架师
 开源中国首席劝架师
发布于 2017/09/30 15:04
字数 380
阅读 2K
收藏 1

行业解决方案、产品招募中!想赚钱就来传!>>>

涉及知识点:

  • ajax请求 (使用:axios
  • 跨域
  • post提交
  • socket交互(使用:socket.io
  • buffer接收文件
  • stream保存文件

前端代码

var socket = io.connect('http://localhost:8080/product')
socket.on('progress', function (p) {
    console.log(p + '%')
})
// 获取<input id="file" type="file">的文件数据
var file = document.getElementById('file').files[0]
var instance = axios.create({
  // 要使用post提交必须设Content-Type为
  // application/x-www-form-urlencoded (键值对形式提交)或
  // multipart/form-data (二进制形式提交)
  headers: { 'Content-Type': 'multipart/form-data' }
})
instance.post('http://localhost:8080/product/upload/img?name=' + file.name +  '&size=' + file.size, file)

后端代码

const querystring = require('querystring')
const app = require('http').createServer(handler)
const io = require('socket.io')(app)

// 创建socket链接,这里使用了of进行域限定
const pro = io.of('/product').on('connection', socket => {
  // ...
})

function handler (req, res) {
  const params = querystring.parse(req.url.split('?')[1])

  // 跨域,因前端文件是直接拖到浏览器上运行以file://形式访问,与后台不在同一域,所以要跨域处理
  res.writeHead(200, {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,POST'
  })
  // 处理以/product/upload/img开头的请求
  if (/^\/product\/upload\/img/.test(req.url)) {
    const size = params.size
    const name = params.name
    const buf = []
    let count = 0
    
    // 接收数据事件,会多次触发,chunk的格式为nodejs的Butter,大小不大于65535
    req.on('data', (chunk) => {
      buf.push(chunk)
      count += chunk.length
      // 将进度返回给前端
      pro.emit('progress', Math.round(count / size * 100))
    })

    // 数据接收结束保存图片
    req.on('end', () => {
       // 创建流(stream)
       const ws = fs.createWriteStream(path.resolve(__dirname, 'images', name))
       // 将暂存好的Buffer写入流
       buf.forEach(i => {
         ws.write(i)
       })
       ws.end()
    })
  }     
  res.end('{msg:"success"}', 'utf8')
}

app.listen(process.argv[2] || 8080)
开源中国首席劝架师

开源中国首席劝架师

粉丝 58
博文 21
码字总数 20303
作品 4
广州
高级程序员
私信 提问
加载中
请先登录后再评论。
Netty那点事(三)Channel与Pipeline

Channel是理解和使用Netty的核心。Channel的涉及内容较多,这里我使用由浅入深的介绍方法。在这篇文章中,我们主要介绍Channel部分中Pipeline实现机制。为了避免枯燥,借用一下《盗梦空间》的...

黄亿华
2013/11/24
2W
22
在多个浏览器上运行脚本--Queen

假设你想和朋友们玩这么个游戏:你写下某个数字,然后让朋友们猜你写的是什么数字。你的朋友们将不断的给你一些猜测的数字,直到猜中为止。 现在想象你的朋友都是使用的浏览器,这个游戏就相...

匿名
2013/01/24
4.5K
1
集群存储系统--YFS

YFS集群存储系统由多个元数据服务器(MDS)、多个块数据服务器(CDS)和多个客户端(client)互联组成集群; 数据被分成64M固定大小的数据块(Chunk),每个数据块在CDS本地以常规文件的形式...

匿名
2013/02/19
1.7K
0
基于 ThinkPHP 的内容管理系统--歪酷CMS

歪酷网站管理系统(歪酷CMS)是一款基于THINKPHP框架开发的PHP+MYSQL网站建站程序,本程序实现了文章和栏目的批量动态管理,支持栏目无限分类,实现多管理员管理,程序辅助功能也基本实现了常见的文...

鲁大在线
2013/02/19
6.9K
1
Web 的 SSH 控制台--KeyBox

KeyBox 是一个基于 Web 的 SSH 控制台,用于同步管理多个系统并且可执行远程命令。允许你共享终端命令并上传文件到所有系统。但连接会话打开时你可选择在其中一个终端或者多个终端上执行命令...

匿名
2013/02/28
8.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

搞网站的你,不了解一下共享虚拟主机和备案问题

正文共:1474字 14图,预估阅读时间:4 分钟 今天分享的这一切要从域名备案说起。先科普一下,平时我们访问网站都是用域名访问的,通过DNS服务器将域名解析为IP地址(你知道上网时输入的URL...

郭松成
昨天
0
0
10 分钟学会 pillow 图像处理 16 式

PIL:Python Imaging Library,是Python环境下最受欢迎的图像处理库之一。 pillow简单优雅而功能强大,是图像相关机器学习任务中算法工程师的亲密合作伙伴。 我们将介绍pillow的如下16个图片...

zglg
昨天
0
0
3大排行榜告诉你,Java&Python有多稳

什么编程语言最受欢迎? 零基础小白学什么语言最好找工作? …… 关于这些问题的讨论从来都没停止 今天领扣🐱就来盘点一下 如今最受欢迎的语言到底是什么 Java&Python学习大礼包 资料领取方...

Lintcode
今天
0
0
这道原题答出来了还是跪!今年面试也太难了……

秋招已然到来,Amazon这不又发了一堆岗位,此时可以说是上岸最好机会!不过上周有同学反馈面试亚麻,遇到一题曾经刷过,惨的是最后还是跪了,班班仔细一问原来是这道。 给定一个整数序列,找...

九章算法
今天
0
0
【你只需看一次】YOLO 全系列目标检测算法

文章目录 一、概述 二、Yolo系列全家桶 YOLOv1 开山鼻祖之作 YOLOv2 YOLOv3 YOLOv4 目标检测tricks集大成者 YOLOv5 Fast YOLO Complex-YOLO MV-YOLO YOLO3D YOLO-6D YOLO-LITE Spiking-YOLO ......

osc_5p8bxoq2
9分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部