小編給大家分享一下Ajax如何配合node.js multer實現(xiàn)文件上傳功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

10年的蒙自網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整蒙自建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“蒙自網(wǎng)站設(shè)計”,“蒙自網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

說明

作為一個node 初學(xué)者，最近在做一個聊天軟件，支持注冊、登錄、在線單人、多人聊天、表情發(fā)送、各種文件上傳下載、增刪好友、聊天記錄保存、通知聲開關(guān)、背景圖片切換、游戲等功能，所以用到了multer 模塊，經(jīng)過各種查文檔，做demo例子，終于成功實現(xiàn)單個文件上傳功能，支持大部分文件格式上傳，同時顯示到網(wǎng)頁上

效果

是不是有種微信即視感，沒錯，就是根據(jù)網(wǎng)頁版微信來做的，要實現(xiàn)整體效果的話，要配合css和html來做，前端初學(xué)者，第一次發(fā)博客，實在捉急，近期，將會將代碼放到github上去，感興趣的朋友可以去看一下

下面直接上代碼，輕虐

配置

安裝

直接通過cmd命令窗口安裝multer

npm install multer -save

服務(wù)器代碼

//引入http
const http=require("http");
//引入express
const express=require("express");
//引入multer
const multer=require("multer");
//創(chuàng)建服務(wù)器，綁定監(jiān)聽端口
var app=express();
var server=http.createServer(app);
server.listen(8081);
//建立public文件夾，將HTML文件放入其中，允許訪問
app.use(express.static("public"));
//文件上傳所需代碼
//設(shè)置文件上傳路徑和文件命名
var storage = multer.diskStorage({
  destination: function (req, file, cb){
    //文件上傳成功后會放入public下的upload文件夾
    cb(null, './public/upload')
  },
  filename: function (req, file, cb){
    //設(shè)置文件的名字為其原本的名字，也可以添加其他字符，來區(qū)別相同文件，例如file.originalname+new Date().getTime();利用時間來區(qū)分
    cb(null, file.originalname)
  }
});
var upload = multer({
  storage: storage
});
//處理來自頁面的ajax請求。single文件上傳
app.post('/upload', upload.single('file'), function (req, res, next) {
  //拼接文件上傳后的網(wǎng)絡(luò)路徑，
  var url = 'http://' + req.headers.host + '/upload/' + req.file.originalname;
  //將其發(fā)回客戶端
  res.json({
    code : 1,
    data : url
  });
  res.end();
});

客戶端代碼

  
  
  
  


  
    file