Ajax+node js multer makes file upload function

This time I will bring you the function of Ajax+node js multer to makefile upload, what are thenotesof Ajax+node js multer to make file upload, the following are Let’s take a look at practical cases.

Description

As a node beginner, I have recently been working on a chat software that supports registration, login, online single and multi-person chat , sending emoticons, uploading and downloading various files, adding and deleting friends, saving chat records, switching notification sounds, switching background images, games and other functions, so the multer module was used. After various document searches and demo examples, a single file was finally successfully implemented. The upload function supports the uploading of most file formats and displays them on the web page at the same time. Wrong, 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 in a hurry. In the near future, the code will be put on github. Interested friends can take a look.

Configuration

InstallationInstall 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(); });

       
  
 file  
   

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement WebApi Ajax cross-domain request using CORS

How to implement dynamic loading of combo box with Ajax (With code)

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