前端文件上传功能比较依赖后端,所以第一步用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. Azure一个Cloud Service支持多个公网地址

    Azure刚刚发布在同一个Cloud Service下支持多个公网IP地址的功能. 这个功能主要是用于: 当相同的端口需要公用相同的LoadBalance时. 比如: 一种使用场景是多组Web服务器被 ...

  2. Docker入门(三):容器(Containers)

    这个<Docker入门系列>文档,是根据Docker官网(https://docs.docker.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指 ...

  3. ActiveRecord 的类型初始值设定项引发异常

    最近在研究ActiveRecord网上有很多贴子讲怎么用的.但自己照做就是出错. 最终定位在配置文件出错.应该是ActiveRecord有更新的原因.在国外的网站把配置复制了一份替换.问题解决了.我用 ...

  4. 《Java多线程编程核心技术》读后感(十七)

    使线程具有有序性 正常情况下,线程在运行时多个线程之间执行任务的时机时无序的.可以通过改造代码的方式使它们运行具有有序性 package Seven; public class MyThread ex ...

  5. SetROP2

    一个Windows API SetROP2(int nDrawMode)的使用 该函数的主要的作用是根据nDrawMode设置的方式重新设定绘图的方式,下面就不同的nDrawMode值具体解释绘图模式 ...

  6. sqlserver2012——变量declare

    1.声明变量病定义类型 赋值操作 ) set @name='小明' select @name 使用select进行赋值 ) select @name='李明' seelelct @name

  7. MVC笔记-模板页布局

    MVC分区后  要加上Ares下的主目录   如:@Html.ActionLink("这个帖子真奇葩", "HotIndex", "Prosceniu ...

  8. 蜂窝网络TDOA定位方法的Fang算法研究及仿真纠错

    科学论文为我们提供科学方法,在解决实际问题中,能极大提高生产效率.但论文中一些失误则可能让使用者浪费大量时间.自己全部再推导那真不容易,怀疑的成本特别高,通常不会选择这条路.而如果真是它的问题,其它所 ...

  9. 使用tomcat作为容器安装Jenkins

    安装前准备环境:jdk,maven,tomcat jdk 参考centos安装jdk:https://www.cnblogs.com/pipiyan/p/10491876.html maven 已有安 ...

  10. 3dmax 法线重置

    从一个模型分离部位时,分离出的部分,面法线发生了混乱,左边原始模型,右边分离后 重置法线方法 对模型(比如对分离出的下半身)添加 EditoNormal修改器 选中模型部位 添加Edit Normal ...