node接收前端上传的图片,单文件、多文件同name、多文件不同name

使用模块:multer

npm  i  multer

使用

var multer = require('multer')
// 指定上传的文件路径  //这里是当前文件平级的public/images
var upload = multer({ dest: path.join(__dirname, 'public', 'images') }); 

单文件接收: req.file对象接受文件或者图片对象

 multer(options).single(myfiles)

传单个文件内容,如一次只上传一张图片。myfiles为上传时文件的字段名称。
options 是multer的属性 {dest:xxxx}

前端代码:

 let fora1 = new FormData()
        fora1.append('files', this.state.form.file)
        axios.post('user/postPto', fora1, {
            headers: {
                "Content-Type": "multipart/form-data "
            }
        }).then(res => {
            console.log(res, 'res');
            let { data } = res.data.data
            alert(data)
        })

简略

//提交单个文件  formdata 里面字段是myfiles的对象
router.post('/postPto', upload.single('myfiles'), (req, res) => {
    console.log("=========================================");
    console.log("=========================================");
    let fileObj = req.file;
    console.log('fileObj.myfiles', fileObj);
    res.send(endMassage({ data: "信息插入成功", fileObj }))
})

详细

//提交用户照片  single  与前端form'da'ta中的字段名相匹配才行  只能是单个文件上传使用
router.post('/postPto', upload.single('files'), (req, res) => {
    console.log("=========================================");
    var fileObj = req.file;
    console.log('fileObj', fileObj);
    let imgUrl = fileObj.filename + '.'+ fileObj.originalname.split('.')[1]
    // fileObj {
    //     fieldname: 'files',
    //     originalname: 'WIN_20210318_08_34_14_Pro.jpg',
    //     encoding: '7bit',
    //     mimetype: 'image/jpeg',
    //     destination: 'E:\\uxiao.zjqfyy.shop\\myExpressDome\\myExpressDome\\routes\\indexR\\public\\image',
    //     filename: '5f21c2b4328eff34204d439741ebd957',
    //     path: 'E:\\uxiao.zjqfyy.shop\\myExpressDome\\myExpressDome\\routes\\indexR\\public\\image\\5f21c2b4328eff34204d439741ebd957',
    //     size: 124092
    // }
    //读取文件内容
    // var content = fileObj['files'][0].buffer.toString();
    // fs.
    // console.log(content, "content");
    // let fileUrl = '/imges' + file['file'][0].originalname
    res.send(endMassage({ data: "信息插入成功", imgUrl}))
})

在这里插入图片描述
在这里插入图片描述

多文件接收: req.files 是传来的文件数组

multer(options).array(fieldname[,maxCount])
//一次最多上传3个文件
let upload=multer({dest:"public/images"}).array("myfiles",3);

适用于同一个字段,一次上传多个文件的情况,例如发状态时,选择多张图片发送。接受一个以 fieldname 命名的文件数组。可以指定maxCount 来限制上传的最大数量。这些文件的信息保存在 req.files。我下面的例子是使用的myfiles字段,最大接受文件数量10.

前端代码:

  let fora1 = new FormData()
        fora1.append('myfiles', file)
        fora1.append('myfiles', file)
        fora1.append('myfiles', file)
       
        axios.post('user/postPtoList', fora1, {
            headers: {
                "Content-Type": "multipart/form-data "
            }
        }).then(res => {
            console.log(res, 'res');
            let { data } = res.data.data
            alert(data)
        })
var fs = require('fs')
var multer = require('multer')
//设置保存的路径  dest  
var upload = multer({ dest:"public/images" })
//提交用户多个照片 formdata 里面字段是myfiles的数组
router.post('/postPto', upload.array('myfiles', 10), (req, res) => {
    console.log("=========================================");
    console.log("=========================================");
    let fileObj = req.files;
    console.log('fileObj', fileObj);
    let urlList = fileObj.map(i => {
        let oldname = i.path  //获取path: 'public\\upload\\0f625978d5d1a783b12e149718f8b634',
        let newname = i.path + i.originalname //.jpg
        fs.renameSync(oldname, newname)//将老的文件名改成新的有后缀的文件 #同步写法
        return i.originalname
    })
    res.send(endMassage({ data: "信息插入成功", urlList }))
})

在这里插入图片描述
使用fs模块将上传的文件重命名。
在这里插入图片描述
接受多文件,有不同name标识的 req.files 是传来的文件数组

multer(options).fields(fields) 

适用于上传多个字段的情况。接受指定 fields 的混合文件。这些文件的信息保存在 req.files。fields 是一个对象数组,具有 name 和可选的 maxCount 属性。

let fieldsList=[
    {name:"myfiles1"},
    {name:"myfiles2",maxCount:2}
]
let upload=multer({dest:"public/images"}).fields(fieldsList);

接收任意类型的文件,接收一切上传的文件。

let upload=multer({dest:"public/images"}).any();

本文只是介绍了常用的几个方法,包括单文件,多文件同name,多文件不同name,任意文件,

学习参考了这位老师的博文:

https://blog.csdn.net/Charissa2017/article/details/105207422

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六卿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值