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 相关文章推荐
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
Vue页面骨架屏的实现方法
May 22 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
input的focus方法使用
2010/03/13 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
jquery+css实现下拉列表功能
2017/09/03 jQuery
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
Python __slots__的使用方法
2020/11/15 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
后勤自我鉴定
2013/10/13 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
辩护意见书
2015/06/04 职场文书
个人道歉信大全
2019/04/11 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
基于Python实现射击小游戏的制作
2022/04/06 Python