formData原生實現圖片上傳

yanyongchao發表於2019-03-04
ORM

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`)
})
複製程式碼

相關文章