axios上传文件，nodejs接收保存

最新推荐文章于 2022-10-09 16:41:40 发布

转载最新推荐文章于 2022-10-09 16:41:40 发布 · 815 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/cjlice/blog/1545997

文章标签：

#javascript #前端 #ViewUI

本文深入讲解了前后端交互的关键技术，包括使用axios发起AJAX请求、处理跨域问题、通过socket.io实现实时通信，以及如何从前端上传文件并由后端接收与处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

涉及知识点：

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)

转载于:https://my.oschina.net/cjlice/blog/1545997