資訊專欄INFORMATION COLUMN
摘要：目前覺(jué)得對(duì)我有用的是和。后者可以在本地調(diào)試頁(yè)面，對(duì)于手機(jī)頁(yè)面尤其有用。這次主要說(shuō)一下，我并沒(méi)有實(shí)現(xiàn)所有的功能，只是實(shí)現(xiàn)單圖片上傳這一個(gè)功能，其他的再摸索嘍。目前就這樣，下次弄出來(lái)了多圖片上傳我再接著更新。
這兩天在看《nodejs權(quán)威指南》，這本書(shū)看了好久了，但是讀的一直不細(xì)，這次才好好看了一遍。
收獲還是蠻多的，主要在于wenpack使用的一些細(xì)節(jié)問(wèn)題，有點(diǎn)茅塞頓悟的體驗(yàn)吧，另外在node上也不再一臉懵逼了。不過(guò)說(shuō)實(shí)話，以現(xiàn)在的水平向直接使用node做點(diǎn)什么還是挺難的，今天測(cè)試了下鏈接mongodb和mysql數(shù)據(jù)庫(kù)，雖然能使用，但還是怪怪的。所以就想先使用現(xiàn)有的框架，再反推學(xué)習(xí)node。
框架的話就選了這個(gè)express.
主要就是測(cè)試了幾個(gè)書(shū)里提到的中間件，書(shū)寫(xiě)的有些早，很多api都過(guò)時(shí)了，照著官網(wǎng)一點(diǎn)一點(diǎn)找更新的地方看。
目前覺(jué)得對(duì)我有用的是：multer和static。
后者可以在本地調(diào)試頁(yè)面，對(duì)于手機(jī)頁(yè)面尤其有用。
這次主要說(shuō)一下multer，我并沒(méi)有實(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庫(kù)，我就原生寫(xiě)的ajax，總的來(lái)說(shuō)應(yīng)該沒(méi)什么難的，總之就是點(diǎn)擊按鈕選擇完圖片之后，會(huì)將圖片的信息放在一個(gè)鍵名為myfile的對(duì)象中，傳給后臺(tái)。
express把接受到的圖片存儲(chǔ)在/public/文件下，這里有個(gè)小小的坑?？梢钥吹轿以?b>main.js注釋了這樣一行代碼：
var upload = multer({ dest: "public/" })
其實(shí)最開(kāi)始的時(shí)候我用的就是這一行代碼，dest的意思是選擇一個(gè)路徑去存儲(chǔ)文件，但是這樣寫(xiě)有一個(gè)小小的問(wèn)題，存入進(jìn)來(lái)的文件是沒(méi)有后綴名的。
我在向前臺(tái)返回?cái)?shù)據(jù)的時(shí)候
res.send(req.file)
這個(gè)問(wèn)題就很嚴(yán)重，比如一個(gè)場(chǎng)景是我上傳一張圖片做頭像，但是等我下次進(jìn)入自己的個(gè)人頁(yè)面，后臺(tái)給我返回的數(shù)據(jù)沒(méi)有辦法作為圖片的地址使用，這就很麻煩了。所以在網(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è)置的是文件的名字，那在這里如果寫(xiě)成這種：
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)覆蓋的情況。
目前就這樣，下次弄出來(lái)了多圖片上傳我再接著更新。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89350.html
摘要：對(duì)象包含表單的文本域信息，或?qū)ο蟀瑢?duì)象表單上傳的文件信息。是文件的信息前端傳遞的文件類型在中獲取將具有文本域數(shù)據(jù)，如果存在的話。 node.js實(shí)現(xiàn)formdata上傳文件 1.關(guān)于formdata XMLHttpRequest Level 2 添加了一個(gè)新的接口——FormData。利用 FormData 對(duì)象，我們可以通過(guò) JavaScript 用一些鍵值對(duì)來(lái)模擬一系列表單控件，...
摘要：前段時(shí)間面試過(guò)程中，頻繁遇到異步文件上傳的相關(guān)問(wèn)題。所以，這會(huì)是一個(gè)拖放接口實(shí)現(xiàn)文件異步上傳的完整。監(jiān)聽(tīng)放置元素的事件，通過(guò)對(duì)象可以獲得拖拽事件的狀態(tài)及數(shù)據(jù)。后端文件接收保存后端使用實(shí)現(xiàn)文件上傳。 ??前段時(shí)間面試過(guò)程中，頻繁遇到H5異步文件上傳的相關(guān)問(wèn)題。還遇到過(guò)一個(gè)通過(guò)H5拖放功能實(shí)現(xiàn)文件異步上傳的問(wèn)題，大概知道H5有新增拖拽功能可以接收文件，如何異步上傳文件就母雞了(攤手)。面試...
摘要：原文首發(fā)博主經(jīng)過(guò)實(shí)踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有前端后端的中間件提交告訴不要去處理發(fā)送的數(shù)據(jù)告訴不要去設(shè)置請(qǐng)求頭后端代碼用初始化項(xiàng)目之后，新建一個(gè)路由文件路由設(shè)置上傳的圖片文件存放的地方為根目錄下的文件夾 原文首發(fā)：https://shuirong.github.io/博主經(jīng)過(guò)實(shí)踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有． 1. 前端jQuery,后...
哈。github的地址已經(jīng)更換，求starthttps://github.com/mySoul8012 繼續(xù)~Express框架 簡(jiǎn)單介紹一下 Express事實(shí)上Node內(nèi)置的http模塊上構(gòu)建的一層抽象。理論上所有Express實(shí)現(xiàn)的功能都能用Node實(shí)現(xiàn)核心特征; 設(shè)置中間件響應(yīng)http請(qǐng)求 定義路由表，執(zhí)行不同的http請(qǐng)求 先模板傳遞參數(shù)，來(lái)動(dòng)態(tài)的渲染html文件 一些網(wǎng)址 npm的...
閱讀 2791·2019-08-30 15:53
閱讀 2932·2019-08-29 16:20
閱讀 1134·2019-08-29 15:10
閱讀 1090·2019-08-26 10:58
閱讀 2251·2019-08-26 10:49
閱讀 694·2019-08-26 10:21
閱讀 768·2019-08-23 18:30
閱讀 1693·2019-08-23 15:58
