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

简介: 本文介绍了在Node.js中使用multer模块接收前端上传的图片,包括单文件上传、多文件上传(同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月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
44 0
|
3月前
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
271 5
|
2月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
146 68
|
2月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
53 4
|
2月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
21 1
|
2月前
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
50 3
|
2月前
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
56 2
|
2月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
119 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
2月前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题