![[Pasted image 20240617093358.png]]
首先准备好前端简单的页面结构

<h1>图片上传</h1>
<img class="img" src="" />
<form action=""><input id="input" type="file" /><button id="btn">上传</button>
</form>

前端上传文件部分：

const input = document.getElementById('input')
const btn = document.getElementById('btn')btn.onclick = function (e) {// 阻止按钮点击提交表单的默认行为e.preventDefault()// 获取上传的文件对象const file = input.files[0]// 创建formData对象const formData = new FormData()// 往formData对象中添加file文件formData.append('file', file)// 创建xhr实例const xhr = new XMLHttpRequest()// 监听xhr的响应xhr.onreadystatechange = function (res) {console.log(res);}// 创建一个xhr请求xhr.open('post', '', true)// 发送xhr请求xhr.send(formData)
}

后端处理文件部分:

const express = require('express')
const cors = require('cors')
const fs = require('fs')
const multiparty = require('multiparty')
const path = require('path')const app = express()
app.use(cors())app.post('/upload', function (req, res) {const form = new multiparty.Form({ uploadDir: './images' })form.parse(req, function (err, fields, files) {const file = files.file[0]const newFilePath = `http://localhost:8080/${file.path}`// 响应文件路径res.json({ img: newFilePath })})
})const port = 3001app.listen(port, () => {console.log('服务器已上线...', port)
})