Ajax和节点js multer实现文件上传功能

解释

作为一个节点初学者，最近做了一个聊天软件，支持注册、登录、在线单人、多人聊天、表情发送、各种文件上传下载、添加删除好友、保存聊天记录、通知声音切换、背景图片切换、游戏等功能。所以我使用了multer模块。经过各种文档检查和演示示例，我终于成功实现了上传单个文件的功能，支持上传大部分文件格式。同时，

影响

微信有视觉感吗？是的，它是基于网络版的微信。

要达到整体效果，就要配合css和html。前端初学者第一次写博客真的很急。最近代码会放到github上，感兴趣的朋友可以看一下

代码正下方，轻虐

部署

固定

通过cmd命令窗口直接安装multer

npm安装多保存服务器的代码

//引入http con ST http=require(' http ')；//引入express const express=required(' express ')；//引入multer const multer=require(' multer ')；//创建服务器，绑定监听端口var app=express()；var server=http . CreateServer(app)；server . listen(8081)；//创建一个公共文件夹，放入HTML文件，允许访问app . use(express . static(' public '))；//文件上传需要的代码//设置文件上传路径和文件名varstorage=multer . disk storage({ destination : function(req，file，CB){//文件上传成功后会放在public下的上传文件夹cb(null)中。/public/upload')}，filename :函数(req，file，CB){//将文件名设置为其原始名称，或者添加其他字符来区分同一个文件，如file。原名newdate()。gettime()；用时间区分cb(null，file . original name)} })；var upload=multer({ storage : storage })；//处理来自页面的ajax请求。上传app.post ('/upload '，upload.single ('file ')，function (req，RES，next){//上传文件后拼接网络路径，var URL=' http://' req . headers . host '/upload/' req . file . original name .//发回客户端res.json ({code: 1，data : URL })；RES . end()；});客户端代码

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title！-依托于jquery-script src=' http : js/jquery-1。11 .3 .js '/script/head body div class=' container '标签文件/标签输入类型=' file ' name=' file ' id=' file '/div script var file=$(' # file ')[0]；//这里使用的是onchange事件，所以当你选择完文件之后，就触发事件上传file.onchange=function(){ //创建一个FormDate var formData=new formData()；//将文件信息追加到其中formData.append('file ')，文件。文件[0])；//利用使分离切割，拿到上传文件的格式var src=file.files[0].name，formart=src.split(' . ')[1];//使用如果判断上传文件格式是否符合if(formart==' jpg ' | | formart==' png ' | | formart==' docx ' | | formart==' txt ' | | formart==' PPT ' | | formart==' xlsx ' | | formart==' zip ' | | formart==' rar ' | | formart==' doc '){//只有满足以上格式时，才会触发创建交互式、快速动态网页应用的网页开发技术请求$.ajax({ url: '/upload '，type: 'POST '，data: formData，cache: false，contentType: false，processData: false，success: function(data){ //上传成功之后，返回对象数据if(数据。代码0){ var src=数据。数据；//利用返回值科学研究委员会网络路径，来实现上传文档的下载if(formart==' docx ' | | formart==' txt ' | | formart==' doc '){//结合钢性铸铁样式，实现显示图标var className=' docx//拼接html，生成到页面上去var msg=` a href=' $ { src } ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' I class=' $ { class name } '/I/a `；}else if(formart=='ppt'){ //PPT格式' a href=' $ { src } ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' I class=' $ { class name } '/I/a `；} else if(formart==' xlsx '){//xlsx格式' a href=' $ { src } ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' I class=' $ { class name } '/I/a `；} else if(formart==' zip ' | | formart==' rar '){//zip | | rar格式' a href=' $ { src } ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' I class=' $ { class name } '/I/a `；}else{ //所有的图片格式msg=` a href=' JavaScript : ' rel=' external no follow ' class=' Picheck ' img src=' http : $ { src } '/a `；} //这里将味精追加到你要显示的区域} } //不满足上传格式时}else{ alert('文件格式不支持上传)} }/脚本/正文/html总结

以上所述是小编给大家介绍的埃阿斯配合节点js multer实现文件上传功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！