前端文件上传功能比较依赖后端,所以第一步用nodejs实现一个供文件上传的功能接口。

因为本人对nodejs也是一知半解,所以刚开始的想法是像原始的ajax交互那样,获取上传文件的内容,然后再通过nodejs的buffer的知识,将获取到的文件流输出到准备好的目录中。于是就悲剧了。下面是获取图片资源的代码。

运行结果

首先获取资源是非常的慢,要等几分钟才会输出内容。后来看到可以在每一步获取文件流时就进行文件处理,不必等所有内容获取后再操作。但是随之又产生了一个新问题,就是获取来的文件内容中不仅包括文件内容还包括一些其它信息,需要将与文件内容无关的内容去除掉。还好nodejs中buffer提供了一系列的操作,但是想一想就麻烦的要死,而且还不好保证操作后的内容全部都是文本内容。就在我陷入崩溃的边缘时,看到了nodejs中的一个对象multiparty(简直就是救星),其中专门对formdata对象做了很好封装,完全可以通过调用其中的方法来实现,于是一个上传文件的后端接口便出炉了(想想还有点小激动),下面奉上源码。

前端js代码相对来说就思路很清晰了,主要通过input中type=file上传,可以利用FormData对象将要上传的文件信息写入到这个对象中,这个对象的好用之处就在于可以向其中添加多个图片信息对象,所以多文件上传当然不再是什么难题了!再通过ajax将FormData传送到我们写好的接口中即可。哇,终于大功告成!感兴趣的小伙伴快去实践一下把,有了nodejs,我们大前端终于可以独挡一面了,java什么的去死把.....

javascript结合nodejs实现多文件上传的更多相关文章

  1. nodejs+express-实现文件上传下载管理的网站

    Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...

  2. nodejs学习之文件上传

    最近要做个图片上传的需求,因为服务端春节请假回家还没来,所以就我自己先折腾了一下,大概做出来个效果,后台就用了nodejs,刚开始做的时候想网上找一下资料,发现大部分资料都是用node-formida ...

  3. javascript插件uploadify简单实现文件上传

    最近在学习mvc,需要用到文件上传的功能,找了很多的jquery插件,最后决定使用uploadify这个插件,参照了各位大神的博客,终于勉勉强强会用了.在此,做一下笔记,方便以后忘了查看. 首先在官网 ...

  4. nodejs+multer+ajax文件上传

    前端 html代码 + ajax代码 form表单(无需指定action) <form enctype="multipart/form-data" method=" ...

  5. NodeJs koa2实现文件上传

    [转载自:]https://www.jianshu.com/p/34d0e1a5ac70 知识讲解 koa2框架是一个基于中间件的框架,也就是说,需要使用到的功能,比如路由(koa-router),日 ...

  6. NodeJS+formidable实现文件上传加自动重命名

    前述 本人node初学者,此前使用原生node实现文件上传时遇到了一些困难,只做到了.txt 和.png两中格式的文件可以正常上传,如果上传其他格式文件服务端保存的文件会无法正常打开,原因是对form ...

  7. nodejs 简单http 文件上传demo

    // 这是一个简单的Node HTTP,能处理当前目录的文件 // 并能实现良种特殊的URL用于测试 // 用http://localhost:8000 或http://127.0.0.1:8000 ...

  8. nodejs实现单文件上传。

    new了formidable的一个实例. formidable模块可以直接捕获当前数据流的状态并返回文件路径. 主要使用了file事件和end事件. var form = new formidable ...

  9. nodeJS 服务端文件上传

    var http = require('http'); var path = require('path'); var fs = require('fs'); function uploadFile( ...

随机推荐

  1. POJ3694(求割边)

    Network Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 7943   Accepted: 2893 Descripti ...

  2. struts2的使用知识点

    最开始学习java的时候学习过struts,但是对配置和struts的理解深度不够,现在工作虽然再用,但是自己搭建环境和使用心得始终很零散,所以现在决定重新理一遍,有条理的学习一下struts. 至于 ...

  3. 四 MySQL数据库表设计

    一: 设计表: user:   ID,  PWD,  name,  type archiveRecord:     referdate,   archiveNum,   owner,   user, ...

  4. [bzoj2154]Crash的数字表格(mobius反演)

    题意:$\sum\limits_{i = 1}^n {\sum\limits_{j = 1}^m {lcm(i,j)} } $ 解题关键: $\sum\limits_{i = 1}^n {\sum\l ...

  5. mysql连接错误解决

    EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUlXU1dEIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...

  6. PHP注释-----PHPDOC

    用过IDE或看过其他源码的小伙伴们应该都见过类似下面这样的注释   /** * 递归获取所有游戏分类 * @param int $id * @return array */ 看得多了就大概知道了一些规 ...

  7. 学习SpringMVC时遇到的一些问题

    1. 找不到mapping 比较弱智的问题,忘了在对应的类上加上 @Controller 注解了 2. Model中设置的值不显示 Eclipse 自动生成的web.xml 是 2.3版本的,网上说改 ...

  8. 计蒜课/ 微软大楼设计方案/中等(xjb)

    题目链接:https://nanti.jisuanke.com/t/15772 题意:中文题诶- 思路:对于坐标为p1(x1, y1), p2(x2, y2) 的两个核心, 其中 x1 <= x ...

  9. 计蒜课/UCloud 的安全秘钥(hash)

    题目链接:https://nanti.jisuanke.com/t/15768 题意:中文题诶- 思路:直接hash就好了,当时zz了没想到... 代码: #include <iostream& ...

  10. Hyperledger Fabric java chaincode 中文乱码问题

    开发java chaincode过程中遇到一个中文乱码的问题.都是官方的demo,请求的sdk是用java写的,部署的chaincode有两种选择(不考虑node),一种go语言写的chaincode ...