文档章节

axios上传文件,nodejs接收保存

BarZu
 BarZu
发布于 2017/09/30 15:04
字数 380
阅读 582
收藏 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)

© 著作权归作者所有

BarZu

BarZu

粉丝 50
博文 21
码字总数 20303
作品 4
广州
高级程序员
私信 提问
JS HTTP 请求库哪家强?Axios,Request,Superagent,Fetch 还是 Supertest

原文作者:Chidume Nnamdi 译者:UC 国际研发 Jothy 写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于...

2018/12/12
0
0
在Node.js中发起HTTP请求的5种方法

深入解析Node.js中5种发起HTTP请求的方法 翻译:疯狂的技术宅 英文标题:5 Ways to Make HTTP Requests in Node.js 原文链接:www.twilio.com/blog/2017/0… 创建HTTP请求使现代编程语言的核...

京程一灯
01/09
0
0
vue-router+axios+vuex大杂烩

vue-router 1.vue-router路由基本加载 简单四步走 安装 引用 配置路由文件,并在vue实例中注入 确定视图加载的位置 2.路由的跳转 3.router传参数 动态路由 无论/home/后面是什么,都会进入到...

胡志武98
05/25
0
0
使用 HTTP 上传 G 级的文件之 Node.js 版本

不管喜欢与否,javascript无处不在。 我们可以在客户端的前台应用中找到它,也可以在大量的框架、类库中找到它,而且可以在服务器端的后台应用中找到它。 近年来, Javascript越来越流行,这...

oschina
2014/11/02
8.2K
16
一步一步解析Axios源码,从入门到原理

一. Axios是什么? 一个基于 Promise 来管理 http 请求的简洁、易用且高效的代码封装库。通俗一点来讲,它是一个前端替代Ajax的一个东西,可以使用它发起http请求接口功能,它是基于Promise...

全栈者
07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
491
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
20
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
11
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
33
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部