目录
html
nodejs详细实现
nodejs简单实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>index</title>
<script type="text/javascript" src="base64.js"></script>
</head>
<body>
<input type="file" id="file" multiple accept=".dwg" />
<button onclick="btnClick()">上传</button>
<button onclick="lookBtnClick()">查看</button>
<!-- 表单的同步提交及缺点
什么是表单的同步提交
通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交
表单同步提交的缺点
<form> 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差
<form> 表单同步提交后，页面之前的状态和数据会丢失 -->
<!-- 阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转 -->
<!-- 文件名为：file1 后端接收到的对象名就是 file1:{} 对象 -->
<form action="http://localhost:3000/upload" method="POST" enctype="multipart/form-data">
<input multiple type="file" name="file1" />
<input type="submit" value="提交" />
</form>
<script>
var url = ''
var file = document.getElementById('file')
var files1 = ''
file.onchange = function () {
files1 = this.files[0]
console.log(this.files)
}
function btnClick() {
let formData = new FormData()
console.log(files1)
formData.append('file1', files1)
let xhr = new XMLHttpRequest()
xhr.open('post', 'http://127.0.0.1:3002/upload_file', true)
// xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
xhr.send(formData)
xhr.onreadystatechange = () => {
// console.log(xhr.response)
console.log(JSON.parse(xhr.response))
url = JSON.parse(xhr.response).filePath
console.log(url)
}
}
function lookBtnClick() {
// var url = 'http://127.0.0.1:8080/file/a-2.dwg' //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)) + '&officePreviewType=pdf')
}
</script>
</body>
</html>
nodejs详细实现
const formidable = require('formidable')
const url = require('url')
const express = require('express')
const bodyParser = require('body-parser')
const path = require('path')
const fs = require('fs')
// const multer = require('multer');
const app = express()
// app.use(multer().any());//上传任何文件
app.use(express.static(__dirname + '/www'))
// 开放目录
app.use('/file/', express.static(__dirname + '/file/'))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
// 跨域
app.all('*', function (req, res, next) {
//设置允许跨域的域名，*代表允许任意域名跨域
res.header('Access-Control-Allow-Origin', '*')
//允许的header类型
res.header('Access-Control-Allow-Headers', 'Origin,X-Requested-With,Accept,Content-type')
res.header('Access-Control-Allow-Credentials', true)
//跨域允许的请求方式
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
res.header('Content-Type', 'application/json;charset=utf-8')
if (req.method.toLowerCase() == 'options') res.sendStatus(200) //让options尝试请求快速结束
else next()
})
app.post('/', (req, res) => {
console.log(req.body, 'body')
console.log(url.parse(req.url))
res.send({ status: 200, string: 'hello word!', code: 1 })
})
app.post('/upload', (req, res) => {
// console.log(req.files)
// 创建formidable表单解析对象
const form = new formidable.IncomingForm()
// 保留上传文件的后缀名字
form.keepExtensions = true
// 设置上传文件的保存路径
form.uploadDir = path.join(__dirname, 'file')
// 解析客户端传递过来的formData对象
form.parse(req, (err, fields, files) => {
// req：请求对象
// err：错误对象
// filelds：普通请求参数的内容
// files：文件的内容的参数包括保存的地址信息
console.log(files)
// 需要更改名字，让文件可以正常打开
var oldpath = files.file1.filepath
let newpath = 'file/' + files.file1.originalFilename
// var newpath = path.parse(files.file.name).name + sd.format(new Date(), 'YYYYMMDDHHmmss') + path.parse(files.file.name).ext
console.log(files.file1.filepath)
// 保存文件
fs.rename(oldpath, newpath, function (err) {
if (err) console.log('改名失败', err)
})
res.send({ filePath: 'http://127.0.0.1:3000/' + newpath })
})
})
app.listen(3000, () => {
console.log('server start 3000')
})
nodejs简单实现
let fs = require('fs')
let path = require('path')
let express = require('express')
let formidable = require('formidable')
const app = express()
// 开放目录
app.use('/file/', express.static(__dirname + '/file/'))
// 跨域
app.all('*', function (req, res, next) {
//设置允许跨域的域名，*代表允许任意域名跨域
res.header('Access-Control-Allow-Origin', '*')
//允许的header类型
res.header('Access-Control-Allow-Headers', 'Origin,X-Requested-With,Accept,Content-type')
res.header('Access-Control-Allow-Credentials', true)
//跨域允许的请求方式
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
res.header('Content-Type', 'application/json;charset=utf-8')
if (req.method.toLowerCase() == 'options') res.sendStatus(200) //让options尝试请求快速结束
else next()
})
// 保存文件
function saveFile(file, callback) {
// 定义存储文件地址
let savePath = path.resolve(__dirname, `./file/${file.file1.originalFilename}`)
let sourcePath = file.file1.filepath
// 创建读写流
let readStream = fs.createReadStream(sourcePath)
let writeStream = fs.createWriteStream(savePath)
// 读写进程开始
readStream.pipe(writeStream)
// 监听读取完成事件
readStream.on('end', () => {
// 读取完成后，释放读取源文件链接
fs.unlinkSync(sourcePath)
callback('http://127.0.0.1:3002/file/' + file.file1.originalFilename)
})
}
// 上传文件接口
app.post('/upload_file', (req, res) => {
let form = new formidable.IncomingForm()
form.parse(req, function (err, fields, files) {
// 对于单个文件，这里的files直接是file对象
let file = files
console.log(file)
saveFile(file, (data) => {
res.send({ state: 'success', msg: '上传成功！', filePath: data })
})
})
})
// 启动
app.listen(3002, () => {
console.log('start server 3002')
})
参考：如何使用nodejs接收上传文件 | 码农家园
