用Express实现一个简易的图片服务器。
所需要的安装的插件 npm i xxx
- express -- http://expressjs.com/
- multer -- https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。
- cors -- 主要用来解决跨域问题的 https://www.npmjs.com/package/cors
实现步骤
1. 先用express开启一个服务器
const express = require('express');
const app = express()
app.get('/', (req, res) => {
console.log('测试是否成功')
})
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', '*'); // 这个是不用cors，自行设置的可跨域访问，
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端口已开启')
})
前端代码
<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="开始上传">
</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>
