简单的 express+multer 实现 upload

1. init and install packages

npm init -y
npm i -D express multer

2. node code

2.1 app.js

const path=require('path')
const express=require('express')
const app=express()

// import upload module
const {single, many}=require('./upload')

// create express static server
app.use(express.static(path.join(__dirname,'static')))

// upload single file
app.post('/upload/single',(req,res)=>{
    single(req,res,err=>{
        uploadEnd(err,res)
    })
})

// upload many files
app.post('/upload/many',(req,res)=>{
    many(req,res,err=>{
        uploadEnd(err,res)
    })
})

// upload end
function uploadEnd(err,res){
    if(err){
        res.send({code:1})
    }else{
        res.send({code:0})
    }
}

app.listen(8888)
console.log('server is running on port 8888')

2.2 upload.js

const multer=require('multer')

// distStorage config
const storage=multer.diskStorage({
	// set file save path
    destination(req,file,cb){
        cb(null,'static/files')
    },
    // set save filename
    filename(req,file,cb){
        cb(null,`${file.originalname}`)
    }
})

const upload=multer({
    storage,
    limits:{
    	// limit file counts 10
        files:10,
        // limit file size 5M
        fileSize:5*1024*1024
    }
})

// export module
exports.single=upload.single('file')
exports.many=upload.array('files')

3. client code

<input type="file" id="file" multiple accept="image/jpeg,image/png">
<input id="upload" type="button" value="upload">

<script src="axios.min.js"></script>
<script>
	const upload=document.querySelector('#upload')
	const file=document.querySelector('#file')
	
	upload.addEventListener('click',()=>{
		const fileLen=file.files.length
	    if(!!fileLen){
	        const formdata=new FormData()
	        const uploadMethod=fileLen===1?'single':'many'
	        const uploadName=fileLen===1?'file':'files'
	        
	        Array.from(file.files).forEach(f=>{
	            formdata.append(uploadName,f)
	        })
	        
	        axios.post(`/upload/${uploadMethod}`,formdata,{
	            headers:{'Content-Type':'multipart/form-data'}
	        }).then(res=>{
	            // do something
	        })
	    }
	})
</script>