多文件上传(含node服务端)

多文件上传

app.js

const express = require('express')

const fs = require('fs')
const path = require('path')

const app = express()
const multipart = require('connect-multiparty')
const multipartHandler = multipart()

app.all('/*',(req,res,next) => {
    res.header('Access-Control-Allow-Origin','*')
    res.header('access-control-allow-methods','GET,POST,options')
    next()
})


const writeFile = (file) => {
    const tempPath = file.path
    let targetPath = './upload/' + file.name
    console.log('target',targetPath);
    fs.copyFile(tempPath, targetPath, (error) => {
        if (error) {
          console.error('Error moving file', error);
          res.status(500).send('Error moving file');
        } else {
          console.log(file.name+'插入成功')
        //   删除本条临时缓存数据
        fs.unlink(tempPath,(error) => {
            if(error) {
                console.log('删除'+file.name+'缓存失败');
            }
            else{
                console.log('删除'+file.name+'缓存成功');
            }
        })
        }
      });
}

app.post('/upload',multipartHandler,(req,res) => {
    console.log('body',req.body)
    console.log('files',req.files);
    let fileLen = req.files.file.length
    if (fileLen > 1) {
        let fileArr = req.files.file
        for(let key in fileArr) {
            let file = fileArr[key]
            console.log('file',file);
            writeFile(file)
        }
    }else {
        let file = req.files.file
        writeFile(file)
    }
    res.send({
        code:200,
        msg:'success'
    })
})

app.listen('9876',() => {
    console.log('文件上传端口已开启http://localhost:9876/upload')
})

connect-multiparty插件会在系统生成临时文件 即req.files.file.path 为临时路径，使用fs模块的copyFile移动到当前的目录下面之后使用fs的unlink模块删除临时路径

前端

index.js

/** @return {HTMLElement} */
function $ (elAttr) {
    return document.querySelector(elAttr)
}

let uploadFileButton = $('#uploadFileButton')
let view = $('.container')
let tips = $('.inner-text')
let innerProgress = $('.inner-progress')
let loadText = $('.load-text')

function switchTips (flag){
    if(flag) {
        tips.style.display = 'block'
    }else {
        tips.style.display = 'none'
    }
}

view.ondrop = async function(e){
    view.style.border = '1px solid rgb(205 28 28)'
    e.preventDefault()
    console.log('e', e.dataTransfer.files);
    if(e.dataTransfer.files){
        const fileArr = Array.from(e.dataTransfer.files) // 类数组结构变为数组
        const fileForm = new FormData()
        for(let key in fileArr) {
            const url = URL.createObjectURL(fileArr[key])
            randomImg(url,fileArr[key].name)
            console.log('url地址',url);
            console.log('当前文件',fileArr[key]);
            fileForm.append('file',fileArr[key],fileArr[key].name)
        }
        let {data:res} = await uploadHttp(fileForm)
        console.log('多文件上传结果',res);
    }
}
view.ondragenter = function(e){
    console.log(e)
}

view.ondragover = function(e){
    // console.log(e);
    view.style.border = '1px solid rgb(205 28 28)'
    e.preventDefault()
}

view.ondragleave = function(e){
    console.log('结束',e);
    view.style.border = '1px solid #ccc'
}

// 上传文件处理函数
function uploadHttp(fileObj){
    return axios({
        method:"POST",
        url:"http://localhost:9876/upload",
        headers:{
            "Content-Type":"multipart/form-data"
        },
        data:fileObj,
        onUploadProgress: function(progressEvent) {
            const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            console.log(`上传进度: ${percentage}%`);
            innerProgress.style.width = percentage + '%'
            loadText.innerText = '当前上传进度' + percentage + '%'
            if(percentage >= 100) {
                loadText.innerText = '上传完毕'
                switchTips(false)
            }
        }
    })
}


// 文件上传函数
async function uploadFileHandler (event){
    console.log('event',event);
    // 判断当前文件个数
    let len = event.target.files.length
    if (len > 1) {
        console.log('当前为多文件上传',event.target.files);
        const fileArr = Array.from(event.target.files) // 类数组结构变为数组
        const fileForm = new FormData()
        for(let key in fileArr) {
            const url = URL.createObjectURL(fileArr[key])
            randomImg(url,fileArr[key].name)
            console.log('url地址',url);
            console.log('当前文件',fileArr[key]);
            fileForm.append('file',fileArr[key],fileArr[key].name)
        }
        let {data:res} = await uploadHttp(fileForm)
        console.log('多文件上传结果',res);
    } else if (len == 1){
        console.log('当前为单文件上传',event.target.files);
        const url = URL.createObjectURL(event.target.files[0])
        console.log('url',url);
        randomImg(url,event.target.files[0].name)
        const fileForm = new FormData()
        fileForm.append('file',event.target.files[0])
        let {data:res} = await uploadHttp(fileForm)
        console.log('单文件上传结果',res);
    }
}

// 生成img
function randomImg (url,name){
    let img = document.createElement('img')
    img.src = url
    img.style.width = '60px'
    let p = document.createElement('p')
    p.innerText = name
    view.appendChild(img)
    view.appendChild(p)
}


uploadFileButton.addEventListener('change',(e) => {
    uploadFileHandler(e)
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多文件上传</title>
    <style>
        *{padding: 0px;margin: 0px;list-style: none;}
        .container {
            width: 600px;
            height: 200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            border: 1px solid #ccc;
            border-radius: 12px;
        }
        .container h5 {
            text-align: center;
        }
        .inner-text {
            text-align: center;
            color: #595555;
        }
        .progress {
            margin: 100px auto;
            width: 90%;
            height: 16px;
            border: 1px solid #ccc;
        }
        .inner-progress {
            width: 0%;
            height: 100%;
            background: #051488;
        }
    </style> 
</head>
<body>
    <div class="container">
        <h5 class="inner-text">拖动文件到这里上传 支持多文件上传</h5>
    </div>
    <input id="uploadFileButton" multiple type="file" placeholder="上传文件">
    <!-- 显示当前进度条 -->
    <div class="progress">
        <div class="inner-progress"></div>
        <p class="load-text">未选择文件上传</p>
    </div>
    <script src="./axios.min.js"></script>
    <script src="./index.js"></script>
</body>
</html>