Ajax cooperates with node js multer to implement file upload function

This article mainly introduces Ajax and node js multer to implement the file upload function. Friends in need can refer to the following

Instructions

As a node beginner, I have recently been working on a chat software that supports registration, login, online single and multi-person chat, emoticon sending, various file uploads and downloads, adding and deleting friends, chat record saving, notification sound switch, background picture switching, For games and other functions, the multer module was used. After various document searches and demo examples, I finally successfully implemented the single file upload function, which supports uploading of most file formats and displays it on the web page at the same time

Effect

Does it feel like WeChat is instantly visible? Yes, it is based on the web version of WeChat.

To achieve the overall effect, it must be done with css and html. I am a front-end beginner and it is my first time to post a blog. I am really anxious. In the near future, the code will be put on github. Interested friends can take a look.

Go directly to the code below, light abuse

Configuration

Installation

Install multer directly through the cmd command window

npm install multer -save

Server code

//引入http const http=require("http"); //引入express const express=require("express"); //引入multer const multer=require("multer"); //创建服务器，绑定监听端口 var app=express(); var server=http.createServer(app); server.listen(8081); //建立public文件夹，将HTML文件放入其中，允许访问 app.use(express.static("public")); //文件上传所需代码 //设置文件上传路径和文件命名 var storage = multer.diskStorage({ destination: function (req, file, cb){ //文件上传成功后会放入public下的upload文件夹 cb(null, './public/upload') }, filename: function (req, file, cb){ //设置文件的名字为其原本的名字，也可以添加其他字符，来区别相同文件，例如file.originalname+new Date().getTime();利用时间来区分 cb(null, file.originalname) } }); var upload = multer({ storage: storage }); //处理来自页面的ajax请求。single文件上传 app.post('/upload', upload.single('file'), function (req, res, next) { //拼接文件上传后的网络路径， var url = 'http://' + req.headers.host + '/upload/' + req.file.originalname; //将其发回客户端 res.json({ code : 1, data : url }); res.end(); });

Client code

       
  
 file  
   

The above is what I compiled for everyone, I hope it will be useful to you in the future Everyone is helpful.

Related articles:

Detailed explanation of the use of AJAX request queue

ajaxDetailed explanation of the steps to implement waterfall flow layout ( Code attached)

jQuery json makes Ajax calling function (code attached)

The above is the detailed content of Ajax cooperates with node js multer to implement file upload function. For more information, please follow other related articles on the PHP Chinese website!