国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Express系列之multer

Null / 2685人閱讀

摘要：目前覺得對我有用的是和。后者可以在本地調(diào)試頁面，對于手機頁面尤其有用。這次主要說一下，我并沒有實現(xiàn)所有的功能，只是實現(xiàn)單圖片上傳這一個功能，其他的再摸索嘍。目前就這樣，下次弄出來了多圖片上傳我再接著更新。

這兩天在看《nodejs權(quán)威指南》，這本書看了好久了，但是讀的一直不細，這次才好好看了一遍。

收獲還是蠻多的，主要在于wenpack使用的一些細節(jié)問題，有點茅塞頓悟的體驗吧，另外在node上也不再一臉懵逼了。不過說實話，以現(xiàn)在的水平向直接使用node做點什么還是挺難的，今天測試了下鏈接mongodb和mysql數(shù)據(jù)庫，雖然能使用，但還是怪怪的。所以就想先使用現(xiàn)有的框架，再反推學(xué)習node。

框架的話就選了這個express.

主要就是測試了幾個書里提到的中間件，書寫的有些早，很多api都過時了，照著官網(wǎng)一點一點找更新的地方看。

目前覺得對我有用的是：multer和static。

后者可以在本地調(diào)試頁面，對于手機頁面尤其有用。

這次主要說一下multer，我并沒有實現(xiàn)所有的功能，只是實現(xiàn)單圖片上傳這一個功能，其他的再摸索嘍。

這是文件的整個目錄，主要就兩個，一個是根目錄下的main.js，還有一個是public/index.html。

放代碼：

//main.js
let express = require("express");

var multer  = require("multer")

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, "public/");
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + ".png");
    }
  })
  
var upload = multer({ storage: storage })

//var upload = multer({ dest: "public/" })
  

let app = express()

app.use(express.static("public"))

app.post("/public/index.html",upload.single("myfile"),(req,res,next)=>{
    console.log(req.file)
    res.send(req.file)
})

app.listen(3300,"127.0.0.1")






    
    
    
    Document

不想引用jquery庫，我就原生寫的ajax，總的來說應(yīng)該沒什么難的，總之就是點擊按鈕選擇完圖片之后，會將圖片的信息放在一個鍵名為myfile的對象中，傳給后臺。

express把接受到的圖片存儲在/public/文件下，這里有個小小的坑。可以看到我在main.js注釋了這樣一行代碼：

var upload = multer({ dest: "public/" })

其實最開始的時候我用的就是這一行代碼，dest的意思是選擇一個路徑去存儲文件，但是這樣寫有一個小小的問題，存入進來的文件是沒有后綴名的。

我在向前臺返回數(shù)據(jù)的時候

res.send(req.file)

這個問題就很嚴重，比如一個場景是我上傳一張圖片做頭像，但是等我下次進入自己的個人頁面，后臺給我返回的數(shù)據(jù)沒有辦法作為圖片的地址使用，這就很麻煩了。所以在網(wǎng)上找了一個原因，就把上面的代碼注釋換成了這個：

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, "public/");
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + ".png");
    }
})

var upload = multer({ storage: storage })

destination是文件存儲的地址，filename設(shè)置的是文件的名字，那在這里如果寫成這種：

filename: function (req, file, cb) {
  cb(null, file.fieldname + ".png");
}

你會發(fā)現(xiàn)你傳入的每一張圖片的名字都是myfile.png，新的覆蓋舊的。所以為了能保存?zhèn)魅氲乃袌D片，我就使用Date.now()作為每張圖片不同的識別符，這樣就不會再出現(xiàn)覆蓋的情況。

目前就這樣，下次弄出來了多圖片上傳我再接著更新。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89350.html

相關(guān)文章

  • node.js實現(xiàn)formdata上傳文件

    摘要：對象包含表單的文本域信息，或?qū)ο蟀瑢ο蟊韱紊蟼鞯奈募畔ⅰＪ俏募男畔⑶岸藗鬟f的文件類型在中獲取將具有文本域數(shù)據(jù)，如果存在的話。 node.js實現(xiàn)formdata上傳文件 1.關(guān)于formdata XMLHttpRequest Level 2 添加了一個新的接口——FormData。利用 FormData 對象，我們可以通過 JavaScript 用一些鍵值對來模擬一系列表單控件，...

    Aceyclee 評論0 收藏0

  • H5拖放+FormData接口+NodeJS，完整異步文件上傳（一）

    摘要：前段時間面試過程中，頻繁遇到異步文件上傳的相關(guān)問題。所以，這會是一個拖放接口實現(xiàn)文件異步上傳的完整。監(jiān)聽放置元素的事件，通過對象可以獲得拖拽事件的狀態(tài)及數(shù)據(jù)。后端文件接收保存后端使用實現(xiàn)文件上傳。 ??前段時間面試過程中，頻繁遇到H5異步文件上傳的相關(guān)問題。還遇到過一個通過H5拖放功能實現(xiàn)文件異步上傳的問題，大概知道H5有新增拖拽功能可以接收文件，如何異步上傳文件就母雞了(攤手)。面試...

    NervosNetwork 評論0 收藏0

  • 兩種主流上傳圖片的方法：jQuery+Multer || 原生JS

    摘要：原文首發(fā)博主經(jīng)過實踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有前端后端的中間件提交告訴不要去處理發(fā)送的數(shù)據(jù)告訴不要去設(shè)置請求頭后端代碼用初始化項目之后，新建一個路由文件路由設(shè)置上傳的圖片文件存放的地方為根目錄下的文件夾 原文首發(fā)：https://shuirong.github.io/博主經(jīng)過實踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有． 1. 前端jQuery,后...

    cnTomato 評論0 收藏0

  • node Express 框架

    哈。github的地址已經(jīng)更換，求starthttps://github.com/mySoul8012 繼續(xù)~Express框架 簡單介紹一下 Express事實上Node內(nèi)置的http模塊上構(gòu)建的一層抽象。理論上所有Express實現(xiàn)的功能都能用Node實現(xiàn)核心特征; 設(shè)置中間件響應(yīng)http請求 定義路由表，執(zhí)行不同的http請求 先模板傳遞參數(shù)，來動態(tài)的渲染html文件 一些網(wǎng)址 npm的...

    supernavy 評論0 收藏0

發(fā)表評論

0條評論

Null

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<