NodeJS使用formidable實現文件上傳

来源:http://www.cnblogs.com/liboxncg/archive/2016/10/26/6001297.html
-Advertisement-
Play Games

最近自學了一下NodeJS,然後做了一個小demo,實現歌曲的添加、修改、播放和刪除的功能,其中自然要實現音樂和圖片的上傳功能。於是上網查找資料,找到了一個formidable插件,該插件可以很好的實現文件的上傳功能。該小demo用到了MySQL資料庫,所有的數據都存放到了資料庫中。下麵簡單說一些如... ...


  最近自學了一下NodeJS,然後做了一個小demo,實現歌曲的添加、修改、播放和刪除的功能,其中自然要實現音樂和圖片的上傳功能。於是上網查找資料,找到了一個formidable插件,該插件可以很好的實現文件的上傳功能。該小demo用到了MySQL資料庫,所有的數據都存放到了資料庫中。下麵簡單說一些如何使用。

1.創建app.js主文件

const express = require('express');
const router = require('./router');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();

//靜態資源服務
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));

//配置模板引擎
app.set('views', path.join(__dirname, 'views'));
app.engine('.html', require('ejs').renderFile);
app.set('view engine', 'html');

//配置解析普通表單post請求體
app.use(bodyParser.urlencoded({extended:false}));

//載入路由系統
app.use(router);

app.listen(3000, '127.0.0.1', () => {
    console.log('server is running at port 3000.');
})

2.html文件中的form表單

add.html文件:

<form action="/add" method="post" enctype="multipart/form-data"> 
      <div class="form-group">
        <label for="title">標題</label>
        <input type="text" class="form-control" id="title" name="title" placeholder="請輸入音樂標題">
      </div>
      <div class="form-group">
        <label for="artist">歌手</label>
        <input type="text" class="form-control" id="singer" name="singer" placeholder="請輸入歌手名稱">
      </div>
      <div class="form-group">
        <label for="music_file">音樂</label>
        <input type="file" id="music" name="music" accept="audio/*">
        <p class="help-block">請選擇要上傳的音樂文件.</p>
      </div>
      <div class="form-group">
        <label for="image_file">海報</label>
        <input type="file" id="poster" name="img" accept="image/*">
        <p class="help-block">請選擇要上傳的音樂海報.</p>
      </div>
      <button type="submit" class="btn btn-success">點擊添加</button>
    </form>

註意:method="post" enctype="multipart/form-data"

3.創建路由router.js文件

const express = require('express');
const router = express.Router();
const handler = require('./handler');

router
    .get('/', handler.showIndex)
    .get('/musicList', handler.getMusicList)
    .get('/add', handler.showAdd)
    .post('/add', handler.doAdd)
    .get('/edit', handler.showEdit)
    .post('/edit', handler.doEdit)
    .get('/remove', handler.doRemove)

module.exports = router;

  註意:router.js文件中的依賴不用多說。

4.創建handler.js文件

const formidable = require('formidable');
const config = require('./config');
const db = require('./common/db');
const path = require('path');
const fs = require('fs');
exports.doAdd = (req, res) => {
    const form = new formidable.IncomingForm();
    form.uploadDir = config.uploadDir;//上傳文件的保存路徑
    form.keepExtensions = true;//保存擴展名
    form.maxFieldsSize = 20 * 1024 * 1024;//上傳文件的最大大小
    form.parse(req, (err, fields, files) => {
        if (err) {
            throw err;
        }
        const title = fields.title;
        const singer = fields.singer;
        const music = path.basename(files.music.path);
        const img = path.basename(files.img.path);
        db.query('INSERT INTO music (title,singer,music,img) VALUES (?,?,?,?)', [
            title,
            singer,
            music,
            img
        ], (err, rows) => {
            if (err) {
                throw err;
            }
            res.redirect('/');
        })
    })
};

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 做開發的,可能都做過信息採集相關的程式,史林楓也經常做一些數據採集或某些網站的業務辦理自動化操作軟體。 獲取目標網頁的信息很簡單,使用網路編程,利用HttpWebResponse、HttpWebRequest和WebClient就可以了。 複雜的是獲取網頁內容後,需要對關鍵信息進行過濾,最初史林楓主 ...
  • 在64位的Windows操作系統中,為了相容32位程式的運行,64位的Windows操作系統採用重定向機制。目的是為了能讓32位程式在64位的操作系統不僅能操作關鍵文件文夾和關鍵的註冊表並且又要避免與64位程式衝突 在64位的Windows操作系統上,可以運行32位的應用程式,這是通過一個叫做WOW ...
  • 調用DelectDir方法前可以先判斷文件夾是否存在 原文地址:http://www.cnblogs.com/iamlucky/p/5997865.html ...
  • 為滿足性能、擴展性、業務快速交付等方面的要求,新.net core雲開發框架改造的主要思想是:高內聚、低耦合,即進一步實現縱向和橫向分層,提高可伸縮性和可擴展性,實現彈性部署: 採用領域驅動設計進行架構橫向分層,同時業務功能縱向分割 在代碼和資料庫設計上充分考慮雲架構要素,提高可伸縮性、可擴展性、高 ...
  • querystring處理參數的小利器。 下麵是querystring的四個方法。 ①stringify:將一個參數對象序列化為一個字元串 eg: querystring.stringify({name:'jenny',course:['js','node'],from:''}); 輸出:'name ...
  • 一。開發的準備 1.jdk的安裝(window) (1)根據自己的電腦下載對應的jdk,並安裝 (推薦安裝在沒有中文的目錄中)。 網站 http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk7-downloads-1880260. ...
  • 一、AbstractCollection 提供了集合的最大實現 繼承該類,必須實現size()和iterator(),因為該類操作集合都是通過iterator 二、fail-fast策略 該策略在集合框架中多次被應用 一種多線程對同一集合操作的保護措施,確保操作目標沒有被其他線程操作過,與cas思想 ...
  • macOS Sierra 已經幫我們預裝了 Ruby、PHP(5.6)、Perl、Python 等常用的腳本語言,以及 Apache HTTP 伺服器。由於 nginx 既能作為 HTTP 伺服器也能作為反向代理伺服器,且配置簡單,這裡我們用 nginx 代替 Apache 作為我們預設的 HTTP ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...