formData原生实现图片上传

最新推荐文章于 2024-05-07 03:30:34 发布

weixin_34413065

最新推荐文章于 2024-05-07 03:30:34 发布

阅读量226

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5aa01068f265da23970669ce

版权

formData

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

formData使用

let formData = new FormData()
formData主要有两个方法set，append
formData.set('a', 5) // 把a的键值设置为5
formData.append('b', 5) // 把b的兼职设置为5

那set和append区别？？
formData.set('a', 5)
formData.set('a', 6) // 把a的键值设置为6   {a: 6}
formData.append('b', 5)
formData.append('b', 6) // 把b的键值[5, 6]  {b: [5, 6]}
复制代码

利用formData实现图片上传

客户端

<body>
    <input type="file" id="file" style="display: none;">
    <button id="btn">upload</button>
</body>
<script>
    let btn = document.querySelector('#btn')
    let file = document.querySelector('#file')

    btn.onclick = function() {
        file.click() // 调取系统选择图片的弹框
    }
    
    // 监听input的file变化值
    file.onchange = function (event) {
        let file = event.target.files[0]
        upload(file)
    }

    function upload(file) {
        let xhr = new XMLHttpRequest()
        xhr.open('post', '/upload', true)
        let formData = new FormData()
        formData.set('filename', file)
        xhr.send(formData)
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert('success')
            } 
        }
    }
</script>
复制代码

服务器

const express = require('express')
const app = express()
const path = require('path')
const multer = require('multer')
const multerObj = multer({ dest: 'uploads/'}) //上传中间件

app.use(multerObj.any())

app.get('/', (req, res, next) => {
    res.setHeader('Content-Type', 'text/html')
    res.sendFile(path.join(__dirname, 'index.html'))
})

app.post('/upload', (req, res, next) => {
    console.log(req.files)
    res.send({
        'states':'success'
     })
})

app.listen(9090, () => {
    console.log('server listen 9090')
})
复制代码

weixin_34413065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
formData原生实现图片上传

formDataXMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.formData使用let for...
复制链接

扫一扫