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

简介: 本文介绍了在Node.js中使用multer模块接收前端上传的图片,包括单文件上传、多文件上传(同name和不同name)以及任意类型文件上传的方法。

使用模块:multer

npm  i  multer
AI 代码解读

使用

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

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

 multer(options).single(myfiles)
AI 代码解读

传单个文件内容,如一次只上传一张图片。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)
        })
AI 代码解读

简略

//提交单个文件  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 }))
})
AI 代码解读

详细

//提交用户照片  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}))
})
AI 代码解读

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

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

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

适用于同一个字段,一次上传多个文件的情况,例如发状态时,选择多张图片发送。接受一个以 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)
        })
AI 代码解读
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 }))
})
AI 代码解读

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

multer(options).fields(fields)
AI 代码解读

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

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

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

let upload=multer({
   dest:"public/images"}).any();
AI 代码解读

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

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

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

目录
打赏
0
1
0
1
95
分享
相关文章
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
111 23
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
461 68
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
109 4
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
66 1
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
247 3
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
122 2

热门文章

最新文章