用Express實(shí)現(xiàn)一個(gè)簡(jiǎn)易的圖片服務(wù)器。
所需要的安裝的插件 npm i xxx
- express -- http://expressjs.com/
- multer -- https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
Multer 是一個(gè) node.js 中間件店展，用于處理 multipart/form-data 類型的表單數(shù)據(jù)养篓，它主要用于上傳文件。
- cors -- 主要用來(lái)解決跨域問(wèn)題的 https://www.npmjs.com/package/cors
實(shí)現(xiàn)步驟
1. 先用express開(kāi)啟一個(gè)服務(wù)器
const express = require('express');
const app = express()
app.get('/', (req, res) => {
console.log('測(cè)試是否成功')
})
app.listen(7777, () => {
console.log('7777port start')
})
2. 用multer cors
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('uploads') ,(req, res) => {
res.set('Access-Control-Allow-Origin', '*'); // 這個(gè)是不用cors赂蕴，自行設(shè)置的可跨域訪問(wèn)柳弄，
res.send(`http://localhost:7777/preview/${req.file.filename}`)
})
// 用cors
app.get('/preview/:key',cros() , (req, res) => {
// 獲取圖片地址
res.sendFile(`/uploads/${req.params.key}`, {
root: __dirname,
headers: {
'Content-Type': 'image/jpge',
}
}, (error) => {
console.log(error)
})
})
完整代碼
const express = require('express')
const multer = require('multer')
const cros = require('cors');
const upload = multer({ dest: 'uploads/' });
const app = express()
app.get('/', (req, res) => {
res.send('Hello World');
})
app.post('/upload', cros(), upload.single('uploads') ,(req, res) => {
// res.set('Access-Control-Allow-Origin', '*');
res.send(`http://localhost:7777/preview/${req.file.filename}`)
})
app.get('/preview/:key',cros() , (req, res) => {
res.sendFile(`/uploads/${req.params.key}`, {
root: __dirname,
headers: {
'Content-Type': 'image/jpge',
}
}, (error) => {
console.log(error)
})
})
app.listen('7777', () => {
console.log('7777端口已開(kāi)啟')
})
前端代碼
<body>
<form id="f" action="http://localhost:7777/upload" enctype="multipart/form-data" method="POST">
<input type="file" name="uploads" id="xxx">
<input type="submit" value="開(kāi)始上傳">
</form>
<img src="" id="images">
<script>
f.addEventListener('submit', (e) => {
e.preventDefault();
console.log('表單提交了');
const form = new FormData();
const action = f.getAttribute('action');
form.append(xxx.name, xxx.files[0])
const xhr = new XMLHttpRequest();
xhr.open('POST', action);
xhr.onload = function() {
document.querySelector('#images').setAttribute('src', xhr.response);
}
xhr.send(form);
})
</script>
</body>
