前台代码

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. Tomcat 安装错误

    安装tomcat时,遇到"failed to install tomcat6 service check your settings and permissions"的问题 安装时 ...

  2. 配置磁盘映射(在服务器和eclipse 中)

    在eclipse中配置磁盘映射和项目名称访问省略:

  3. 并不对劲的bzoj4560:p3269:[JLOI2016]字符串覆盖

    题目大意 \(T\)(\(T\leq10\))组询问 每组询问给出一个字符串\(A\)(\(|A|\leq10^4\)),\(n\)(\(n\leq4\))个\(A\)的子串\(B_1,B_2,B_3 ...

  4. css content

    before after demo 1 添加描述信息 div1:after{conent:"天假额外的文字"} 2 也可以显示元素的某些属性 <a class="d ...

  5. 三步升级已安装的 Android SDK 和 ADT 插件(转载)

    转载:http://www.tfan.org/update-adt-and-android-sdk-in-five-minutes/ 如何快速地把已安装的 Android SDK 及 Eclipse ...

  6. PHP中的连贯操作

    连贯操作有什么好处?就是多行操作可以在一行之内完成,要进行连贯操作的方法必须返回$this,也就是当前类的对象实例,然后就可以进行连贯操作了,具体的实现代码如下所示. <?php /** * p ...

  7. 7步教你使用git命令上传本地代码至github仓库(小白向)

    前言 1:首先你需要知道github和git分别是什么?(众所周知github是全球最大同性交友网站233333) github:国外一个免费托管代码的开源网站,每位注册用户都拥有专属的个人仓库(个人 ...

  8. Luogu P3619 魔法 【贪心/微扰证明】

    题目描述 cjwssb知道是误会之后,跟你道了歉.你为了逗笑他,准备和他一起开始魔法.不过你的时间不多了,但是更惨的是你还需要完成n个魔法任务.假设你当前的时间为T,每个任务需要有一定的限制ti表示只 ...

  9. 倒排索引构建算法BSBI和SPIMI

    参考:https://blog.csdn.net/androidlushangderen/article/details/44889677 倒排索引 : 一般的索引检索信息的方式.比如原始的数据源假设 ...

  10. [POJ1721]Cards

    Description 剀剀和凡凡有N张牌(依次标号为1,2,--,N)和一台洗牌机.假设N是奇数.洗牌机的功能是进行如下的操作:对所有位置I(1≤I≤N),如果位置I上的牌是J,而且位置J上的牌是K ...