express+multer實現node圖片上傳的具體步奏-js教程-PHP中文網

首頁

web前端

js教程

express+multer實現node圖片上傳的具體步奏

php中世界最好的语言

Apr 12, 2018 pm 05:31 PM

node 上傳

這次帶給大家express multer實現node圖片上傳的具體步奏，express multer實現node圖片上傳的注意事項有哪些，下面就是實戰案例，一起來看一下。

下文將介紹使用express multer實作node中的圖片上傳功能，具體內容介紹如下：

在前端中，我們使用ajax來非同步上傳圖片,使用file-input來上傳圖片，使用formdata物件處理圖片數據，post到伺服器中

# 在node中使用multer中間件來對上傳路由介面進行處理

multer文檔

package.jsonhtml部分

<body>
<p class="form-group">
    <label>File input:</label>
    <input type="file" name="file" id="file">
    <p id="result"></p>
    <img id="img" src="">
  </p>
  <button id="upload" class="btn btn-default">提交</button>
  </body>

登入後複製

# js部分

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //上传图片的业务逻辑函数
    function uploadFile(){
      //上传图片的input
      var file = document.getElementById("file")
      //因为准备用post提交，又因为图片的内容比较大，所以我们选择使用formdata来承载数据
      //创建formdata对象
      var formData = new FormData();
      //给formdata对象中放入数据(键值对的方式)
      formData.append('file',file.files[0]);
      //提交请求
      $.ajax({
        url: '/upload',//请求路径
        type: 'POST',
        data: formData,
        contentType: false,//为了让浏览器根据传入的formdata来判断contentType
        processData: false,//同上
        success: function(data){
          if(200 === data.code) {
            $('#result').html("上传成功！");
            $('#img').attr('src',data.data);
          } else {
            $('#result').html("上传失败！");
          }
          console.log(2)
        },
        error: function(){
          $("#result").html("与服务器通信发生错误");
        }
      });
      console.log(1)
    }
    //给按钮添加点击事件
    function postPage() {
        //上传按钮
        var uploada = document.getElementById('upload');
        uploada.addEventListener("click",function () {
          uploadFile();
        },false);
    }
    window.onload = function () {
      postPage();
    }
</script>

登入後複製

## NodeJS邏輯程式碼

const http = require('http')
const path = require('path')
const express = require('express')
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
//文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
const multer = require('multer')
const app = express()
//配置express的静态目录
app.use(express.static(path.join(dirname, 'public')));
app.get('/',(req,res)=>{
  res.sendFile(dirname+'/index.html')
})
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
  //确定图片存储的位置
  destination: function (req, file, cb){
    cb(null, './public/uploadImgs')
  },
![](http://images2017.cnblogs.com/blog/1283058/201802/1283058-20180201154342296-515041615.png)
  //确定图片存储时的名字,注意，如果使用原名，可能会造成再次上传同一张图片的时候的冲突
  filename: function (req, file, cb){
    cb(null, Date.now()+file.originalname)
  }
});
//生成的专门处理上传的一个工具，可以传入storage、limits等配置
var upload = multer({storage: storage});
//接收上传图片请求的接口
app.post('/upload', upload.single('file'), function (req, res, next) {
  //图片已经被放入到服务器里,且req也已经被upload中间件给处理好了（加上了file等信息）
  //线上的也就是服务器中的图片的绝对地址
  var url = '/uploadImgs/' + req.file.filename
  res.json({
    code : 200,
    data : url
  })
});
http.createServer(app).listen(3000,()=>{
  console.log('server is listening')
})

登入後複製

自我感覺良好，不知道博客園為什麼要給我移除首頁....

再发一次，if(delete){
alert('Never publish anything again.')
}else{
alert(1)
}

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

Java教學

1670

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1276

C# 教程

1256

Related knowledge

如何在FastAPI中實現檔案上傳和處理 Jul 28, 2023 pm 03:01 PM

如何在FastAPI中實現檔案上傳和處理FastAPI是一個現代化的高效能Web框架，簡單易用且功能強大，它提供了原生支援檔案上傳和處理的功能。在本文中，我們將學習如何在FastAPI框架中實作檔案上傳和處理的功能，並提供程式碼範例來說明具體的實作步驟。首先，我們需要導入需要的函式庫和模組：fromfastapiimportFastAPI,UploadF

nvm 怎麼刪除node Dec 29, 2022 am 10:07 AM

nvm刪除node的方法：1、下載「nvm-setup.zip」並將其安裝在C碟；2、設定環境變量，並透過「nvm -v」指令查看版本號；3、使用「nvm install」指令安裝node；4、透過「nvm uninstall」指令刪除已安裝的node即可。

Win10電腦上傳速度慢怎麼解決 Jul 01, 2023 am 11:25 AM

　　Win10電腦上傳速度慢怎麼解決？我們在使用電腦的時候可能會覺得自己電腦上傳檔案的速度非常的慢，那麼這是什麼情況呢？其實這是因為電腦預設的上傳速度為20%，所以才導致上傳速度非常慢，很多小夥伴不知道怎麼詳細操作，小編下面整理了win11格式化c碟操作步驟，如果你有興趣的話，跟著小編一起往下看看吧！　　Win10上傳速度慢的解決方法　　1、按下win+R調出運行，輸入gpedit.msc，回車。　　2、選擇管理模板，點選網路--Qos封包計畫程序，雙擊限制可保留頻寬。　　3、選擇已啟用，將帶

如何在QQ音樂上傳歌詞 Feb 23, 2024 pm 11:45 PM

隨著數位時代的到來，音樂平台成為人們獲取音樂的主要途徑之一。然而，有時候我們在聽歌的時候，發現沒有歌詞是一件十分困擾的事。許多人都希望在聽歌的時候能夠展現歌詞，以便更好地理解歌曲的內容和情感。而QQ音樂作為國內最大的音樂平台之一，也為用戶提供了上傳歌詞的功能，使得用戶可以更好地享受音樂的同時，感受到歌曲的內涵。以下將介紹一下在QQ音樂上如何上傳歌詞。首先

node專案中如何使用express來處理檔案的上傳 Mar 28, 2023 pm 07:28 PM

怎麼處理文件上傳？以下這篇文章為大家介紹一下node專案中如何使用express來處理文件的上傳，希望對大家有幫助！

酷狗上傳自己的音樂的簡單步驟 Mar 25, 2024 pm 10:56 PM

1.打開酷狗音樂，點選個人頭像。 2、點選右上角設定的圖示。 3.點選【上傳音樂作品】。 4.點選【上傳作品】。 5.選擇歌曲，然後點選【下一步】。 6.最後點選【上傳】即可。

Pi Node教學：什麼是Pi節點？如何安裝和設定Pi Node？ Mar 05, 2025 pm 05:57 PM

PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點，並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後，成為眾多先鋒積極參與測試的重要環節，為即將到來的主網發布做準備。如果您還不了解PiNetwork，請參考Pi幣是什麼？上市價格多少？ Pi用途、挖礦及安全性分析。什麼是PiNetwork？ PiNetwork項目始於2019年，擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與