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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 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可逆加密函数(分享)
2013/06/06 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP常用处理静态操作类
2015/04/03 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
python中关于for循环的碎碎念
2017/06/30 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
就业推荐表自我鉴定
2013/10/29 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
亲属关系公证书
2014/04/08 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
地震慰问信
2015/02/14 职场文书
公司仓库管理制度
2015/08/04 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书