node 文件上传操作(前端 form表单上传 formData上传 后端 node 使用express+multer)

目录

  • 前端
    • form表单上传
    • formData上传
  • 后端 node 使用express+multer

前端

form表单上传

 <h1>个人信息h1>
    <form action="http://localhost:3000/api/sendFile" method="post" enctype="multipart/form-data">

    <label for="name">姓名:label>
    <input type="text" name="name" id="name"><br><br>

    <label for="email">电子邮件地址:label>
    <input type="email" name="email" id="email"><br><br>

    <label for="avatar">头像:label>
    <input type="file" name="avatar" id="avatar" multiple><br><br>

    <label for="pic">喜欢:label>
    <input type="file" name="pic" id="pic" multiple><br><br>

    <input type="button" value="保存" id="save">
  form> 

formData上传

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <h1>个人信息h1>
    

    <label for="name">姓名:label>
    <input type="text" name="name" id="name"><br><br>

    <label for="email">电子邮件地址:label>
    <input type="email" name="email" id="email"><br><br>

    <label for="avatar">头像:label>
    <input type="file" name="avatar" id="avatar" multiple><br><br>

    <label for="pic">喜欢:label>
    <input type="file" name="pic" id="pic" multiple><br><br>

    <input type="button" value="保存" id="save">
    

    <script>
        var username = document.getElementById("name")
        var email = document.getElementById("email")

        var avatar = document.getElementById("avatar")
        var pic = document.getElementById("pic")

        var save = document.getElementById("save")
        


        save.onclick = function () {
            var formdata = new FormData()
            formdata.append("name", username.value)
            console.log(username,username.value);
            formdata.append("email", email.value)
           
            for (let i = 0; i < avatar.files.length; i++) {
                formdata.append("avatar", avatar.files[i])
            }
            console.log(formdata);
            for (let i = 0; i < pic.files.length; i++) {
                formdata.append("pic", pic.files[i])
            }
            console.log(formdata.getAll("name"))
            console.log(formdata.getAll("email"))
            console.log(formdata.getAll("avatar"))
            console.log(formdata.getAll("pic"))
            
            let ajax = new XMLHttpRequest()
            ajax.open("POST", 'http://localhost:3000/api/sendFile')
            ajax.send(formdata)
            ajax.onreadystatechange = function () {
                if (ajax.status == 200) {
                    console.log(ajax.responseText);
                }
            }
        }

    script>
body>

html>

后端 node 使用express+multer

const express = require('express')
const fs = require('fs')
const app = express()
const port = 3000
const multer = require('multer')
//使用中间件
// app.use(express.static(`${__dirname}/web`))
let storage= multer.diskStorage({
    destination:function(req,file,cb){
        cb(null,`${__dirname}/uploadfiles`)
    },
    filename:function(req,file,cb){
        cb(null,file.originalname)
    }
})
let upload =multer({storage:storage})
app.get('/', (req, res) => {

    //返回一个首页
    fs.readFile(`${__dirname}/web/sendFile.html`,(err,data)=>{
        if (err) throw err
        res.append('Content-Type', 'text/html')
        res.send(data)
    })
})



// 搭建文件上传的服务
//单文件 upload.single("avatar")
//多文件 upload.single("avatar")
//多个上传upload.fields([{name:"avatar",maxCount:20},{name:"pic",maxCount:20}])
//没有文件上传upload.none()
app.post('/api/sendFile', upload.fields([{name:"avatar",maxCount:20},
{name:"pic",maxCount:20}
]),(req, res) => {

    //返回一个首页
    console.log(req.body);
    console.log(req.file);
    console.log(req.files);
    res.send("ok")
})


app.listen(port, () => console.log(`Example app listening on port ${port}!`))

你可能感兴趣的:(node,文件上传,前端,express)