一般景色下,前端的文书上传一般都是经过form表单的(<input
type=”file”
/>)来成功文件的上传,倘诺选择node中间层完成跨域,文件的上传就须要在node中间层管理成可读流,转成formData完成转账。

相似情状下,前端的文件上传一般都以经过form表单的(<input type="file" />)来造成文件的上传,假诺利用node中间层完成跨域,文件的上传就供给在node中间层管理成可读流,转成formData实现转会。

 

1、form表单文件上传

一、form表单文件上传

  那是最普及的文本上传形式,通过form表单完毕,简单实用,设置一下method、enctype、action属性就能够了,多文本上传须求设置multiple属性(部分浏览器辅助照旧有一些题指标)。

  那是最分布的文本上传格局,通过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>
1 <form method="post" enctype="multipart/form-data" action="/api/upload">
2     <input type="text" name="username">
3     <input type="password" name="password">
4     <input type="file" name="file">
5     <input type="submit">
6 </form>

二、FormData实现公文上传

 

  FormData对象用以将数据编写翻译成键值对,以便向后台发送数据。其利害攸关用以发送表单数据,但能够用于发送带键数据(keyed
data),而单身于表单使用。对部分浏览器对multiple属性不支持的地方,能够应用formData的交付情势成功。

二、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
  })
})

  FormData对象用以将数据编写翻译成键值对,以便向后台发送数据。其首要用来发送表单数据,但能够用于发送带键数据(keyed
data),而单身于表单使用。对有个别浏览器对multiple属性不援救的状态,能够运用formData的付出形式成功。

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

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

 1 const oFile = document.getElementById('file')
 2 const oBtn = document.getElementById('btn')
 3 
 4 oBtn.addEventListener('click', () => {
 5     files = oFile.files
 6     const formData = new FormData()
 7     formData.append('file', files[0])
 8     formData.append('file1', files[1])
 9 
10     fetch('/api/upload', {
11         method: "POST",
12         body: formData
13     })
14 })

fetch请求暗中同意是不带cookie 

  • 行使fetch请求不要设置Content-Type,不然不可能请求
  • fetch请求私下认可是不带cookie

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

 

  跨域是因为浏览器的同源战术形成,跨域的点子有大多中,这里运用的是node中间层代理完毕(服务端之间的央浼是不设有跨域难题)。

3、node中间层实现文件上传跨域

  node无法直接分析上传的公文,需求引进拓展包connect-multiparty完毕,这样就能够得到文件数量。

  跨域是因为浏览器的同源计策形成,跨域的秘籍有过多中,这里运用的是node中间层代理完毕(服务端之间的央求是不存在跨域难题)。

  得到上传文件,须要在node中间转播发呼吁后台server,这里的文件不可能向来发给后台,必要将上传的文书使用fs.createReadStream转成可读流,同时引进form-data
包(node碰到是一贯不formData对象的),那样就足以兑现node中间层转载文件类型

  node不能够直接深入分析上传的公文,亟需引进拓展包connect-multiparty完结,那样就足以得到文件数量。

  node部分代码:

  得到上传文件,须求在node中间转播发呼吁后台server,这里的文书无法一向发给后台,急需将上传的文书使用fs.createReadStream转成可读流,同时引进form-data
包(node意况是不曾formData对象的)
,那样就足以兑现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部分代码:

注意:

 1 const fs = require('fs')
 2 const path = require('path')
 3 const FormData = require('form-data')
 4 const express = require('express')
 5 const fetch = require('node-fetch')
 6 const router = express.Router()
 7 const multipart = require('connect-multiparty');
 8 var multipartMiddleware = multipart()
 9 
10 router.post('/upload', multipartMiddleware, function (req, res) {
11     // console.log(req.body, req.files);
12 
13     const { path: filePath, originalFilename } = req.files.file
14     const newPath = path.join(path.dirname(filePath), originalFilename)
15 
16     fs.rename(filePath, newPath, function (err) {
17         if (err) {
18             return;
19         }
20         else {
21             const file = fs.createReadStream(newPath)
22             const form = new FormData()
23             form.append('file', file)
24 
25             fetch('http://localhost:8080/upload', {
26                 method: "POST",
27                 body: form
28             })
29         }
30     })
31     res.json({})
32 });
33 
34 module.exports = router; 
  • node不可能直接解析上传文件,须要引进npm包connect-multiparty中间件,只怕引进npm包multiparty
  • 永利开户送38元体验金,node获得文件,须求接纳fs.createReadStream转成可读流
  • node境遇未有formData对象,须要引进npm包form-data
  • fetch请求提交formData数据,无法安装Comtemt-Type

 

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

注意:

总结

  • node不能直接分析上传文件,须求引进npm包connect-multiparty中间件,只怕引进npm包multiparty
  • node得到文件,须求动用fs.createReadStream转成可读流
  • node情形未有formData对象,要求引进npm包form-data
  • fetch请求提交formData数据,不可能设置Comtemt-Type

以上所述是作者给我们介绍的node中间层达成文件上传成效,希望对大家持有帮忙,假若我们有其余疑问请给小编留言,作者会及时回复大家的。在此也非常谢谢大家对台本之家网址的支撑!

  

你只怕感兴趣的文章:

  • nodejs
    multer实现公文上传与下载
  • Ajax异步文件上传与NodeJS
    express服务端管理
  • nodejs+express达成公文上传下载管理网址
  • Node.js开拓教程之基于OnceIO框架实现文件上传和表明功用
  • Nodejs进级:基于express+multer的公文上传实例
  • NodeJS使用formidable完成公文上传
  • Node.js完毕包容IE78九的公文上传进度条

  完整的代码请参照他事他说加以考察
node中间层完成公文上传

 

  假使喜欢请关心本人的Github,给个Star呢,笔者会定时分享部分JS中的知识,^_^

相关文章