node中间层实现文件上传功能


Posted in Javascript onJune 11, 2018

一般情况下,前端的文件上传一般都是通过form表单的(<input type="file" />)来完成文件的上传,如果使用node中间层完成跨域,文件的上传就需要在node中间层处理成可读流,转成formData完成转发。

一、form表单文件上传

这是最常见的文件上传方式,通过form表单实现,简单实用,设置一下method、enctype、action属性就可以了,多文件上传需要设置multiple属性(部分浏览器支持还是有些问题的)。

<form method="post" enctype="multipart/form-data" action="/api/upload">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="file" name="file">
  <input type="submit">
</form>

二、FormData实现文件上传

FormData对象用以将数据编译成键值对,以便向后台发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。对部分浏览器对multiple属性不支持的情况,可以使用formData的提交方式完成。

<!-- 获取上传文件转成formData类型的文件 -->
<input multiple id="file" name="file" type="file" />
<button id="btn">提交</button>

const oFile = document.getElementById('file')
const oBtn = document.getElementById('btn')

oBtn.addEventListener('click', () => {
  files = oFile.files
  const formData = new FormData()
  formData.append('file', files[0])
  formData.append('file1', files[1])

  fetch('/api/upload', {
    method: "POST",
    body: formData
  })
})

使用fetch请求不要设置Content-Type,否则无法请求

fetch请求默认是不带cookie 

三、node中间层完成文件上传跨域

跨域是因为浏览器的同源策略造成,跨域的方法有很多中,这里使用的是node中间层代理完成(服务端之间的请求是不存在跨域问题)。

node无法直接解析上传的文件,需要引入拓展包connect-multiparty完成,这样就可以拿到文件数据。

拿到上传文件,需要在node中转发请求后台server,这里的文件不能直接发给后台,需要将上传的文件使用fs.createReadStream转成可读流,同时引入 form-data 包(node环境是没有formData对象的),这样就可以实现node中间层转发文件类型

node部分代码:

const fs = require('fs')
const path = require('path')
const FormData = require('form-data')
const express = require('express')
const fetch = require('node-fetch')
const router = express.Router()
const multipart = require('connect-multiparty');
var multipartMiddleware = multipart()

router.post('/upload', multipartMiddleware, function (req, res) {
  // console.log(req.body, req.files);

  const { path: filePath, originalFilename } = req.files.file
  const newPath = path.join(path.dirname(filePath), originalFilename)

  fs.rename(filePath, newPath, function (err) {
    if (err) {
      return;
    }
    else {
      const file = fs.createReadStream(newPath)
      const form = new FormData()
      form.append('file', file)

      fetch('http://localhost:8080/upload', {
        method: "POST",
        body: form
      })
    }
  })
  res.json({})
});

module.exports = router;

注意:

  • node无法直接解析上传文件,需要引入npm包connect-multiparty中间件,或者引入npm包multiparty
  • node拿到文件,需要使用fs.createReadStream转成可读流
  • node环境没有formData对象,需要引入npm包form-data
  • fetch请求提交formData数据,不能设置Comtemt-Type

最后给大家附上完整的代码: node中间层实现文件上传

总结

以上所述是小编给大家介绍的node中间层实现文件上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 #Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 #Javascript
实例详解Node.js 函数
Jun 10 #Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 #Javascript
深入浅析Vue中的Prop
Jun 10 #Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 #Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 #Javascript
You might like
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
python实现定时播放mp3
2015/03/29 Python
python实现简单图片物体标注工具
2019/03/18 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python绘制随机网络图形示例
2019/11/21 Python
静态变量和实例变量的区别
2015/07/07 面试题
司机的工作范围及职责
2013/11/13 职场文书
入团者的自我评价分享
2013/12/02 职场文书
运动会解说词50字
2014/01/18 职场文书
股东协议书范本
2014/04/14 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
关于长城的导游词
2015/01/30 职场文书
道歉情书大全
2015/05/12 职场文书