node接收文件

木心操作

已于 2023-11-02 15:57:23 修改

阅读量966

点赞数

分类专栏： node 文章标签：前端 javascript html node.js

于 2022-12-08 16:58:18 首次发布

本文链接：https://blog.csdn.net/qq_41579327/article/details/128240029

版权

node 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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详细实现

安装：npm i formidable@2.1.1

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简单实现

安装：npm i formidable@2.1.1

let fs = require('fs')
let path = require('path')
let express = require('express')
let formidable = require('formidable')
let form = new formidable.IncomingForm()
form.options.maxFileSize = 500 * 1024 * 1024 // 设置最大上传为500MB

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) => {
  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接收上传文件 | 码农家园