成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Express系列之multer

Null / 2690人閱讀

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

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

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

框架的話就選了這個(gè)express.

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

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

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

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

這是文件的整個(gè)目錄，主要就兩個(gè)，一個(gè)是根目錄下的main.js，還有一個(gè)是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)該沒什么難的，總之就是點(diǎn)擊按鈕選擇完圖片之后，會(huì)將圖片的信息放在一個(gè)鍵名為myfile的對象中，傳給后臺(tái)。

express把接受到的圖片存儲(chǔ)在/public/文件下，這里有個(gè)小小的坑?？梢钥吹轿以?b>main.js注釋了這樣一行代碼：

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

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

我在向前臺(tái)返回?cái)?shù)據(jù)的時(shí)候

res.send(req.file)

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

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是文件存儲(chǔ)的地址，filename設(shè)置的是文件的名字，那在這里如果寫成這種：

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

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

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

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

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

相關(guān)文章

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

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

    Aceyclee 評論0 收藏0

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

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

    NervosNetwork 評論0 收藏0

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

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

    cnTomato 評論0 收藏0

  • node Express 框架

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

    supernavy 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<