前台代码

submit() {
var file = this.$refs.fileUpload.files[0];
var formData = new FormData();
formData.append("file", file);
formData.append("username", this.username);
formData.append("password", this.password);
axios.post("http://127.0.0.1:3000", formData).then(res => {
console.log(res);
});
}

后台代码

app.use(function (req, res) {
var form = new formidable.IncomingForm();
form.uploadDir = path.join(__dirname, 'uploads') form.parse(req, function (err, fields, files) {
fs.rename(files.file.path, path.join(__dirname, 'uploads', files.file.name), function (err) {
if (!err) {
return res.end('ok')
}
res.end('err')
})
});
})

注意

  • 前端利用formData才能拿到file数据,这是xhr异步上传文件提供的接口
  • 后台代码如果不使用formidable这个包,那么对接受过来的二进制数据自己处理是非常麻烦的

Node.js——异步上传文件的更多相关文章

  1. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  2. JS异步上传文件

    直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:& ...

  3. 关于js异步上传文件

    好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...

  4. node.js分片上传文件

    前端 : <html> <head> <title>分片上传文件</title> </head> <body> <div ...

  5. 关于JQuery.form.js异步上传文件点滴

    好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...

  6. vue.js异步上传文件前后端代码

    上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  7. Node.js:上传文件,服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...

  8. 科普文:Node.js 如何上传文件到后端服务【转】

    原文链接 https://www.yuque.com/egg/nodejs/httpclient-upload 背景 互联网时代,无数服务是基于 HTTP 协议进行通信的. 除了常见的 前端浏览器 - ...

  9. Servlet异步上传文件

    这里需要用到插件ajaxfileupload.js,jar包:commons-fileupload-1.3.2.jar,commons-io-2.5.jar 注意红色部分的字!!!! 1.创建一个we ...

随机推荐

  1. JavaScript语言基础4

    谈谈JavaScript 中的变量. 在JavaScript 中使用变量的优点:变量保存在计算机的内存中,变量很适合于保存暂时性的数据 ,变量仅仅具有有限的生存期,当 用户关闭了页面或者打开一个新的页 ...

  2. ABAP Debug 技巧

    小技巧,可以在Debugger的时候跳过不想执行的代码,           或者返回执行已经执行过的代码,实际开发过程中很有帮助

  3. YTU 1099: Minesweeper

    1099: Minesweeper 时间限制: 1 Sec  内存限制: 64 MB 提交: 180  解决: 98 题目描述 Minesweeper Have you ever played Min ...

  4. ZOJ - 1610 Count the Colors(线段树区间更新,单点查询)

    1.给了每条线段的颜色,存在颜色覆盖,求表面上能够看到的颜色种类以及每种颜色的段数. 2.线段树区间更新,单点查询. 但是有点细节,比如: 输入: 2 0 1 1 2 3 1 输出: 1 2 这种情况 ...

  5. sphinx索引部分源码续——过程:连接到CSphSource对应的sql数据源,通过fetch row取其中一行,然后解析出field,分词,获得wordhit,最后再加入到CSphSource的Hits里

    后面就是初始化一些存储结构,其中重点说下缓存出来的几个临时文件分别的作用.结尾时tmp0的存储的是被上锁的Index,有些Index正在被查询使用 故上锁.tmp1,即对应将来生成的spp文件,存储词 ...

  6. filter() 函数

    描述 filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表. 该接收两个参数,第一个为函数,第二个为序列,序列的每个元素作为参数传递给函数进行判,然后返回 Tru ...

  7. 4 Java 如何判定是否存活或者死亡

    在堆中存放着几乎所有的对象实例,垃圾收集器在对堆进行回收前,第一件事就是要确定这些对象之中哪些还活着,哪些对象已经死去. 判断对象是否已经死亡有以下几种算法: 引用计数法算法 定义 : 给对象中添加一 ...

  8. bzoj 4585: [Apio2016]烟火表演【左偏树】

    参考:https://blog.csdn.net/wxh010910/article/details/55806735 以下课件,可并堆部分写的左偏树 #include<iostream> ...

  9. centos 7添加快捷键

    转自:http://www.cnblogs.com/flying607/p/5730867.html centos7中不自带启动终端的快捷键,可以自定义添加. 点击右上角的用户名,点击设置,在设置面板 ...

  10. EL表达式(详解)

    EL表达式 1.EL基本内容 1)语法结构        ${expression} 2)[]与.运算符      EL 提供.和[]两种运算符来存取数据.      当要存取的属性名称中包含一些特殊 ...