ajax +NodeJS 實(shí)現(xiàn)圖片上傳實(shí)例
更新時(shí)間：2017年06月06日 16:54:12 作者：魚娟note
本篇文章主要介紹了ajax +NodeJS 實(shí)現(xiàn)圖片上傳實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前臺(tái)用jquery的ajax發(fā)請(qǐng)求，后臺(tái)用NodeJS 的multer模塊實(shí)現(xiàn)圖片上傳。這個(gè)demo給我的感悟是一定要自己能實(shí)現(xiàn)出來，而不是看了別人寫好就直接“拿來”用
note(注意)
大家先在public目錄下創(chuàng)建一個(gè)名為uploads的文件夾，這個(gè)文件夾是用來保存你上傳過的圖片
安裝multer模塊：
npm i -S multer
code（代碼）
1.app.js
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
//所有請(qǐng)求過來，都去項(xiàng)目當(dāng)前的public目錄下尋找所請(qǐng)求的文件，找到就返回
app.use(express.static('./public'));
//選擇diskStorage存儲(chǔ)
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, path.resolve('public/uploads'));
},
filename: function (req, file, cb) {
cb(null, Date.now() + path.extname(file.originalname));//增加了文件的擴(kuò)展名
}
});
const upload = multer({storage: storage});
app.post('/profile', upload.single('avatar'), function(req, res, next) {
res.send({
err: null,
//filePath:就是圖片在項(xiàng)目中的存放路徑
filePath: 'uploads/' + path.basename(req.file.path)
});
});
app.listen(3000, function () {
console.log("app is listening 3000 port");
});
2.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<form class="form-horizontal" enctype='multipart/form-data' method='post' action='javascript:;'>
<input type="file" id="choose"/>
<button onclick="handle()">上傳</button>
<img class="newImg"/>
</form>
<script>
function handle() {
//獲取上傳的File對(duì)象，此處是一張圖片對(duì)象
let file = document.getElementById("choose").files[0];
let formData = new FormData();
formData.append("avatar", file);//設(shè)置key為avartar,value為上述的File對(duì)象
$.ajax({
type: 'POST',
url: '/profile',
data: formData,
processData: false,
success: function (data) {
$(".newImg").attr("src", data.filePath);//上傳成功則圖片顯示
},
error: function (err) {
console.log(err.message);
}
})
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
npm報(bào)錯(cuò)"A?complete?log?of?this?run?can?be?found?
這篇文章主要給大家介紹了關(guān)于npm報(bào)錯(cuò)"A?complete?log?of?this?run?can?be?found?in:"的解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04
nodejs各種姿勢(shì)斷點(diǎn)調(diào)試的方法
這篇文章主要介紹了nodejs各種姿勢(shì)斷點(diǎn)調(diào)試的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
node異步使用await和不用await的區(qū)別實(shí)例分析
這篇文章主要介紹了node異步使用await和不用await的區(qū)別,結(jié)合實(shí)例形式分析了node.js異步使用await和不用await的實(shí)例中,同步與異步執(zhí)行的區(qū)別,需要的朋友可以參考下2023-06-06
Express 是一個(gè)簡潔、靈活的 node.js Web 應(yīng)用開發(fā)框架, 它提供一系列強(qiáng)大的特性，幫助你創(chuàng)建各種 Web 和移動(dòng)設(shè)備應(yīng)用，本篇文章給大家介紹nodejs的express使用教程，感興趣的朋友參考下2015-11-11
jwt在node中的應(yīng)用實(shí)踐(安裝配置封裝)
這篇文章主要為大家介紹了jwt在node中的應(yīng)用實(shí)踐包括安裝配置封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
NodeJS實(shí)現(xiàn)跨域的方法(使用示例)
CORS是一種 W3C 標(biāo)準(zhǔn),它使用額外的 HTTP 頭來告訴瀏覽器讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源,這篇文章主要介紹了NodeJS實(shí)現(xiàn)跨域的方法,需要的朋友可以參考下2024-05-05
了不起的node.js讀書筆記之mongodb數(shù)據(jù)庫交互
這篇文章主要介紹了了不起的node.js讀書筆記之mongodb數(shù)據(jù)庫交互,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了koa源碼中promise的解讀，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
node.js使用stream模塊實(shí)現(xiàn)自定義流示例
這篇文章主要介紹了node.js使用stream模塊實(shí)現(xiàn)自定義流,結(jié)合實(shí)例形式詳細(xì)分析了node.js基于stream模塊實(shí)現(xiàn)自定義的可讀流、可寫流、可讀寫流等相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
node koa2實(shí)現(xiàn)上傳圖片并且同步上傳到七牛云存儲(chǔ)
這篇文章主要介紹了node koa2實(shí)現(xiàn)上傳圖片并且同步上傳到七牛云存儲(chǔ)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07