JS 原生实现文件上传

upload post file XMLHttpRequest
index.html

<!DOCTYPE html>
<html>

<head>
    <title>Index</title>
    <style type="text/css">
    </style>
</head>

<body>
    <div>
        <input id="file" type="file" />
        <button id="upload" type="button">upload</button>
    </div>
    <script type="text/javascript">
        let button = document.getElementById('upload')
        button.addEventListener('click', event => {
            let fileObj = document.getElementById('file').files[0]
            if (fileObj) {
                let url = 'http://192.168.199.172:3000/file_upload'
                let formData = new FormData()
                formData.append('image', fileObj)
                let xhr = new XMLHttpRequest()

                xhr.onload = function () {
                    console.log('ok')
                    console.log(JSON.parse(xhr.responseText))
                }
                xhr.onerror = function () {
                    console.log('fail')
                }
                xhr.open('post', url, true)
                xhr.send(formData)

            } else {
                console.log('请选择文件')
            }
        })
    </script>
</body>

</html>

server.js

let express = require('express')
let app = express()
let bodyParser = require('body-parser')
let fs = require('fs')
let multer = require('multer')
let options = {
  setHeaders: function (res, path, stat) {
    res.set('Access-Control-Allow-Origin', '*')
  }
}

app.use(express.static('public', options))
app.use(bodyParser.urlencoded({
  extended: false
}))
app.use(multer({
  dest: '/tmp/'
}).array('image'))


//  get /
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html')
})


// post file_upload
app.post('/file_upload', (req, res) => {
  console.log('file upload')

  let file = req.files[0]
  let size = file.size
  // size limit  10MB
  if (size > 10240000) {
    res.end('File beyond size limit !')
    return false
  }

  let mimetypeFlag = 0
  let mimetypeArray = ['image/bmp', 'image/gif', 'image/jpeg', 'image/svg+xml', 'image/tiff', 'image/png']
  let mimetype = file.mimetype
  for (let i = 0; i < mimetypeArray.length; i++) {
    if (mimetype === mimetypeArray[i]) {
      mimetypeFlag = 1
    }
  }
  if (mimetypeFlag === 0) {
    res.end('Documents must be image format !')
    return false
  }

  let des_file = __dirname + '/public/images/' + req.files[0].originalname
  fs.readFile(req.files[0].path, (err, data) => {
    fs.writeFile(des_file, data, (err) => {
      if (err) {
        console.log(err)
      } else {
        response = {
          message: 'File Upload Success!',
          filename: req.files[0].originalname
        }
      }
      res.end(JSON.stringify(response))
    })
  })

})

let server = require('http').createServer(app)


server.listen(3000, (req, res) => {
  let host = server.address().address
  let port = server.address().port

  console.log('server is running .  http://%s:%s', host, port)
})

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容