简单服务器传递信息图,简易的Node图片服务器（上传，获取）

用Express实现一个简易的图片服务器。

所需要的安装的插件 npm i xxx

Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。

实现步骤

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端口已开启')

})

前端代码

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);

})