multer中间件的的同步和异步的使用

multer

Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。它是写在 busboy 之上非常高效。

使用

Multer 会添加一个 body 对象 以及 file 或 files 对象 到 express 的 request 对象中。 body 对象包含表单的文本域信息，file 或 files 对象包含对象表单上传的文件信息。

下载安装

npm install multer

配置

//config
const multer = require('multer');

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "./public/upload");
    },
    filename: (req, file, cb) => {  //req：请求对象  file：文件对象  cb:回调函数
        let fileFormat = (file.originalname).split('.');
        cb(null, fileFormat[0]+'-'+Date.now()+'.'+fileFormat[fileFormat.length - 1]);
    }
});

const upload = multer({
    storage: storage
});
module.exports = upload;

同步提交

HTML:

<!--multipart/form-data必须使用post这个数据格式，就是为了不会对上传的文件进行处理--> 
<form action="/" method="post" enctype="multipart/form-data">   
     <!--这里必须要有name属性，在后面的singer方法中要使用-->
     <input type="file" name="img1">  
     <input type="submit" value="提交">
</form>

对应路由的处理:

app.post('/tUpload', upload.single('img1'), (req, res) => {
    res.render('index', {url: ''});
})

异步提交

异步提交使用ajax来提交

这里主要使用了Formdata()全局对象，来提交到后台。

单文件

//前台
let formDataObj;
$('.inputFile').change(function () {
    //得到file对象
    let file = this.files[0];

    // 创建一个FormData的实例对象
    formDataObj = new FormData();

    //将file文件添加FormData对象中
    //imgFile 就是路由中的singer('imgFile')对应
    formDataObj.append('imgFile', file);
})
$('.btn').click(function () {
    $.ajax({
        url: '/yUpload',
        method: 'post',
        data: formDataObj,
        processData: false,   //不对其中的数据不需要进行额外的处理
        contentType: false    //不对其中的类型进行设置
    }).then((res) => {
        console.log(res)
    })
})

//后台
app.post('/yUpload', upload.single('imgFile'), (req, res) => {
    res.json({
        errCode: '0',
        path: './upload/' + req.file.filename
    })
})

多文件上传

//客户端
let formDataObj1;
    $('.many').change(function () {
        let file = this.files;
        for(let i = 0; i < file.length; i++) {
            let httpUrl = window.webkitURL.createObjectURL(file[i]);
            $('.yulan')[0].innerHTML += `<img src="${httpUrl}" class="yuImg">`;
        }
        formDataObj1 = new FormData();
        for(let i = 0; i < file.length; i++) {
            formDataObj1.append('imgFiles', file[i]);
        }
    })
    //点击上传图片
    $('.btn1').click(function () {
        $.ajax({
            url: '/manyImg',
            method: 'post',
            data: formDataObj1,
            processData: false,
            contentType: false
        }).then((res) => {
            console.log(res)
        })
    })

//路由
router.post('/manyImg', upload.array('imgFiles'), (req, res) => {
    console.log(req.files)
})

这样也能可以正确的拿到。