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+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
详解Vue slot插槽
Nov 20 Vue.js
几个你不知道的技巧助你写出更优雅的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
推荐一篇入门级的Class文章
2007/03/19 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
javascript下string.format函数补充
2010/08/24 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
vue的mixins属性详解
2018/03/14 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
python实现决策树ID3算法的示例代码
2018/05/30 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python函数式编程实例详解
2020/01/17 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
设计顾问服务计划书
2014/05/04 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2014年团队工作总结
2014/11/24 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
毕业酒会致辞
2015/07/29 职场文书
基督教追悼会答谢词
2015/09/29 职场文书