两种方案： 这两种方案传参还是有区别额

在nodeJs中上传附件调用了 multer 的中间件，采用这个中间件来上传

首先是表单（前端部分）：

<!DOCTYPE html>

<html>

  <head>

    <title>nodejs文件上传</title>

    <script src="/javascripts/jquery.min.js"></script>

  </head>

  <body>

    <form action="/upload" method="post" enctype="multipart/form-data">

        <input name="fileUpload" type="file" />

        <!--1-->

        <img src="" alt="">

        <button type="submit">上传</button>

    </form>

    <script>

    (function($){

      $('input').on('change', function(event) {

        var files = event.target.files,

            reader = new FileReader();

        if(files && files[0]){

            reader.onload = function (ev) {

                $('img').attr('src', ev.target.result);

            }

            reader.readAsDataURL(files[0]);

        }

      })

    }(jQuery))

    </script>

  </body>

</html>

　　服务器端：

var express = require('express');

var router = express.Router();

var multer = require('multer');

var fs = require('fs');

const UPLOAD_PATH = './uploads'

var upload = multer({ dest: UPLOAD_PATH })

/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });

});

//多文件上传

// router.post('/upload', upload.array('fileUpload'), function (req, res, next) {

//   const files  = req.files;

//   const response = [];

//   const result = new Promise((resolve, reject) => {

//     files.map((v) => {

//       fs.readFile(v.path, function(err, data) {

//         fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) {

//           const result = {

//             file: v,

//           }

//           if (err)  reject(err);

//           resolve('成功');

//         })

//       })

//     })

//   })

//   result.then(r => {

//     res.json({

//       msg: '上传成功',

//     })

//   }).catch(err => {

//     res.json({ err })

//   });

// })

//单个文件上传

router.post('/upload', upload.single('fileUpload'), function (req, res, next) {

  const { file } = req;

  console.log(req.files);

  fs.readFile(file.path, function(err, data) {

    fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) {

      if (err) res.json({ err })

      res.json({

        msg: '上传成功'

      });

    });

  })

})

module.exports = router;

这事表单上传还有一种就是用异步上传（我比较常用的一种）

这种的话需要怼传输的数据进行重新封装 （首先把所得的数据封装为FormData 然后给后台）

 let _this = this;

    document.getElementById('upload').onchange = function (e) {

      let file = e.target.files[0];

      var formData = new FormData();

      formData.append('fileUpload', file);

      _this.axios.post('/user/file-upload', formData).then(function (response) {

        if (response.data.state === 200) {

          _this.imageUrl = _this.$store.state.imgBaseUrl + response.data.result;

          _this.registerFromData.imageUrl = response.data.result;

        }

      });

    }

　　

nodeJs上传附件的更多相关文章

  1. wordpress多站点环境设置上传附件大小

    多站点环境更改上传附件大小: php.ini post_max_size = 8M upload_max_filesize = 10M 另外,后台域名管理中设置/网络设置/可以设置上传文件大小. 代码 ...

  2. jquery 通过ajax FormData 对象上传附件

    之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div>   流程图: <input id=& ...

  3. Discuz! X论坛上传附件到100%自动取消上传的原因及解决方案

    最近接到一些站长的反馈,说论坛上传附件,到100%的时候自己取消上传了.经查是附件索引表pre_forum_attachment表的aid字段自增值出现了问题,导致程序逻辑返回的aid值实际为一个My ...

  4. Discuz模拟批量上传附件发帖

    简介 对于很多用discuz做资源下载站来说,一个个上传附件,发帖是很繁琐的过程.如果需要批量上传附件发帖,就需要去模拟discuz 上传附件的流程. 模拟上传 discuz 附件逻辑 dz附件储存在 ...

  5. 修改WordPress中上传附件2M大小限制的方法/php+iis上传附件默认大小修改方法

    在服务器上架设好WordPress后,使用过程中发现,上传附件大小有2M的限制 话说服务器就是本机,可以直接把文件拖到附件存储文件夹下,然后在需要附件的地方引用链接 可是这种落后的方法终究不是办法,还 ...

  6. Dynamic CRM 2013学习笔记（十三）附件上传 / 上传附件

    上传附件可能是CRM里比较常用的一个需求了,本文将介绍如何在CRM里实现附件的上传.显示及下载.包括以下几个步骤: 附件上传的web页面 附件显示及下载的附件实体 调用上传web页面的JS文件 实体上 ...

  7. 怎样解决asp.net.mvc上传附件超过长度问题？

    最近,在做一个上传附件功能,但是文件超过4M,就报上传的文件超过长度问题

  8. JQuery Uplodify上传附件（同一个页面多个uplodify控件解决方案）

    功能描述:实现同一页面中多个不同附件的上传保存,且做到最大程度的减少代码修改量(最大程度的公用),为了方便实现垃圾数据和垃圾文件的处理,项目采用临时文件夹的方式:即:文件自动上传先保存到临时文件夹下, ...

  9. crm 4 注释与上传附件权限

    文档注释权限及上传附件是与实体的”追加到”权限有关. 文档注释权限及上传附件是与核心记录中”注释”的”追加”权限有关. 追加及追加到的权限,我的理解是与本实体有关联的实体的权限,比如你引用了其它表的字 ...

随机推荐

  1. android 解决小米手机上选择照片路径为null情况

    昨天测试帅哥说他手机选择图库崩溃了,这是一个上传头像的功能,相信很多应用都有这个功能,于是我就把手机拿过来打log看了下返回的路径 为null,在网上搜索了下解决方案,现在把解决方案记录下: 这是在o ...

  2. Android github上的好的开源项目汇总

    转自:http://blog.csdn.net/ithomer/article/details/8882236 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上.基于 ...

  3. 将EF项目从dbfirst转化为codefirst

    一个脚本服务的项目,之前是先设计的数据库表,采用EF的dbfirst做的映射.项目完成后,出现迁移瓶颈. 1.dbfirst项目,如果数据库表结构做了调整,需要重新映射 2.当出现表结构一致,但数据库 ...

  4. NLB网路负载均衡管理器详解（转载）

    序言 在上一篇配置iis负载均衡中我们使用啦微软的ARR,我在那篇文章也中提到了网站的高可用性,但是ARR只能做请求入口的消息分发服务,这样如果我们的消息分发服务器给down掉啦,那么做再多的应用服务 ...

  5. 文件I/O（2）

    文件I/O(2) 文件共享 内核使用三种数据结构表示打开的文件,他们之间的关系决定了在文件共享方面一个进程对还有一个进程可能产生的影响.如图1所看到的. 1)  每一个进程在进程表中都有一个记录项.记 ...

  6. Linux学习笔记(第十一章)

    文件系统及程序资源的配置ulimit: 环境变量: bash变量 alias设定变量别名 设定别名 取消别名 指令执行顺序 组合键 通配符 数据流重导向 多指令 以下命令都需用管道符链接: 截取命令: ...

  7. Bat 批处理杀死进程 重新启动程序

    @echo offset pa=%cd%taskkill /F /IM wgscdTool.exeecho %pa%\wgscdTool.exeping /n 2 127.1>nulstart ...

  8. 20155216 Exp5 MSF基础应用

    Exp5 MSF基础应用 基础问题回答 1.用自己的话解释什么是exploit,payload,encode? exploit : Exploit的英文意思就是利用,在做攻击时,通常称为漏洞利用. 一 ...

  9. python 生成器按指定大小读取文件

    #!/usr/bin/env python import osimport sys def read_file(fpath): Block_Size = 1024 with open(fpath,&q ...

  10. idea ssm项目迁移到另一台机器上时出现不能正常启动项目的解决方案

    首先右下角提示关联spring文件,关联之,然后启动,发现项目无法启动,然后开始排错 首先从这个日志里发现了这么一条提示信息 然后百度了一下,答案都是说 web.xml 之类的 spring拦截器问题 ...