Multiple file upload
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')
})
The connect-multiparty plug-in will generate a temporary file in the system, that is, req.files.file.path as a temporary path. Use the module fsto delete the temporary path copyFileafter moving it to the current directory.fsunlink
front end
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>