一.multer

官方介绍：

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

中文官方网址：

multer/README-zh-cn.md at master · expressjs/multer · GitHub

怎么使用就不介绍了，官方文档很详细

二、使用

1.单个文件（图片或视频都可以）上传

前端代码：

<input type="file" ref="file1" @change="fileChange1"/>

自己封装的向后端发送请求的函数：

// 导入自己封装的axios请求实例
import request from '../tools/request'
export const addArticle = data => {return request({method: 'post',url: '/my/addActicle',// url: '/my/addActicle2',// url: '/my/addActicle3',headers: {'Content-Type': 'multipart/form-data'},data})
}

vue代码：

<script>
//导入自己向后端发送请求的函数
import { addArticle } from '../../request/article'
export default {data() {return {article: {title: '文章标题',cate_id: 1,content: '这是文章内容测试',state: '草稿'}}},methods: {async fileChange1() {//读取文件对象，并基于文件对象获取blob数据const file = this.$refs.file1.files[0]//为对象添加cover_img属性用来保存文件this.article.cover_img = file//向后端发送请求await addArticle(this.article)}}
}
</script>

浏览器查看自己的发送参数：

后端路由代码：

const multer = require('multer')
//创建multer的实例对象，通过dest属性指定文件的存放路径
const upload = multer({ dest: path.join(__dirname, '../uploads') })
//'cover_img'为前端存储文件的属性名，必须一致
router.post('/addActicle', upload.single('cover_img'), addActicle)

自己封装的将后端接收到文件保存文件夹中：

//文章路由处理函数
const fs = require('fs')
const path = require('path')
function saveImg(file, sign) {return new Promise((resolve, reject) => {fs.readFile(file.path, async (err, data) => {if (err) {reject(err)}// 拓展名let extName = file.mimetype.split('/')[1]// 拼接成图片名// 这里可以自行修改let imgName = `${sign}-${Date.now()}.${extName}`// 写入图片// 写入自己想要存入的地址await fs.writeFile(path.join(__dirname, `../upload/${imgName}`), data, err => {//写入失败if (err) { reject(err) }//写入成功，同时返回需要存储在数据中的相对路径resolve(`/upload/${imgName}`)})// 删除二进制文件await fs.unlink(file.path, err => {if (err) { reject(err) }})})})
}

后端路由处理函数代码：

exports.addActicle = (req, res) => {// console.log(req.body);//文本类型的数据// console.log(req.file);//文件类型的数据let file = req.fileconsole.log('通过multer解析文件信息对象', file);saveImg(file, req.user.username).then(res => {// res就是我返回的相对地址的位置console.log(res);}).catch(err => {// 啊....啊 最苦恼的bug环节console.log(err);})
}

后端接收成功：

2.多个文件（图片或视频都可以）上传（需要使用FormData来存储表单数据）

第一种方式

前端代码：

<input type="file" ref="file1" @change="fileChange1" multiple />

自己封装的向后端发送请求的函数：

// 导入自己封装的axios请求实例
import request from '../tools/request'
export const addArticle = data => {return request({method: 'post',//url: '/my/addActicle',url: '/my/addActicle2',// url: '/my/addActicle3',headers: {'Content-Type': 'multipart/form-data'},data})
}

vue代码：

<script>
import { addArticle } from '../../request/article'
export default {data() {return {}},methods: {async fileChange1() {//读取文件对象，并基于文件对象获取blob数据const files = this.$refs.file1.filesconst form = new FormData()for (const item of files) {form.append('cover_img', item)}form.append('test', 1)await addArticle(form)}}
}
</script>

浏览器查看自己的发送参数：

后端路由代码：

const multer = require('multer')
//创建multer的实例对象，通过dest属性指定文件的存放路径
const upload = multer({ dest: path.join(__dirname, '../uploads') })
//'cover_img'为前端存储文件的属性名，必须一致
router.post('/addActicle2', upload.array('cover_img', 3), addActicle2)

后端路由处理函数代码：

exports.addActicle2 = (req, res) => {// console.log('通过token解析出来的用户信息对象', req.user);console.log('通过multer解析表单的文本类型数据', req.body);let files = req.filesconsole.log('通过multer解析表单的文件类型数据', files);
}

后端接收成功：

第二种方式

前端代码：

    <input type="file" ref="file1" @change="fileChange1" multiple /><input type="file" ref="file2" @change="fileChange2" multiple /><button @click="addArticle">上传</button>

自己封装的向后端发送请求的函数：

// 导入自己封装的axios请求实例
import request from '../tools/request'
export const addArticle = data => {return request({method: 'post',//url: '/my/addActicle',//url: '/my/addActicle2',url: '/my/addActicle3',headers: {'Content-Type': 'multipart/form-data'},data})
}

vue代码：

<script>
import { addArticle } from '../../request/article'
export default {data() {return {form: new FormData()}},methods: {async fileChange1() {//读取文件对象，并基于文件对象获取blob数据const file = this.$refs.file1.files[0]this.form.append('cover_img', file)this.form.append('test', 1)},async fileChange2() {const file = this.$refs.file2.files[0]this.form.append('avatar', file)},async addArticle() {await addArticle(this.form)}}
}
</script>>

浏览器查看自己的发送参数：

后端路由代码：

const multer = require('multer')
//创建multer的实例对象，通过dest属性指定文件的存放路径
const upload = multer({ dest: path.join(__dirname, '../uploads') })
router.post('/addActicle3', upload.fields([{ name: 'cover_img', maxCount: 3 }, { name: 'avatar', maxCount: 2 }]), addActicle3)

后端路由处理函数代码：

exports.addActicle3 = (req, res) => {console.log('通过token解析出来的用户信息对象', req.user);console.log('通过multer解析表单的文本类型数据', req.body);let files = req.filesconsole.log('通过multer解析表单的文件类型数据', files);
}

后端接收成功：

node+express+multer实现单个或多个图片文件，视频文件上传相关推荐

单个文件过大上传服务器的方案,上传很大的文件到云服务器上
上传很大的文件到云服务器上内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装 ...
node使用express+multer文件上传和下载的问题
简单使用multer实现文件的上传和下载: 1.文件上传使用multer,首先要在项目中安装multer模块. npm install multer -save 2.这里使用express模块,mul ...
nodeJs中间件Multer详解_使用express实现本地文件/图片上传到服务器指定目录
最终实现的效果,更改Input的值后,将图片显示出来.输入描述信息,提交后,图片上传到后台对应的路径下. Multer Multer 是一个node.js中间件,用于处理 multipart/form ...
express之multer文件上传
安装 npm install multer --save 为了方便演示,本文内容涉及express的模板引擎art-template 使用 index.html模板,注意一定要写enctype=&qu ...
node实现文件分片上传之multer篇
node实现文件分片上传前端在做文件上传时,考虑到网速的快慢,如果文件过大的话可能会导致上传时间过长而请求超时,文件上传失败.因此文件过大需要对文件进行分片上传. 那文件分片上传的具体过程是怎样的呢 ...
Nodejs基于express+multer的文件上传
概览图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持. 常用的开源组件有multer.formidable等,借助这两个开源组件,可以轻松搞定图片上传. 本文主要讲解以 ...
[NodeJS] 使用Express multer搭建文件上传服务
1. 搭建Express项目安装express npm install express 创建express项目,以下app-server为项目名 express app-server cd 进入ap ...
使用 node + express + socket 来一个即时聊天~
首先需要在电脑安装Node.js 如果基础不好的话看下官网了解一下然后我们就可以搭建一个简单的HTTP服务器了下面搭建一个简单的服务器了解一下不是正文首先在文件目录里创建server.js内容为 ...
在 node 中使用 koa-multer 库上传文件详解
本文主要介绍了上传单个文件.多个文件,文件数量大小限制.限制文件上传类型和对上传的图片进行不同大小的裁剪,阅读本篇文章需要具备一定的 node 和 koa 框架的基础知识以及 async await ...

node+express+multer实现单个或多个图片文件，视频文件上传

一.multer

二、使用

1.单个文件（图片或视频都可以）上传

2.多个文件（图片或视频都可以）上传（需要使用FormData来存储表单数据）

node+express+multer实现单个或多个图片文件，视频文件上传相关推荐

最新文章

热门文章

node+express+multer实现单个或多个图片文件，视频文件上传

一.multer

二、使用

1.单个文件（图片或视频都可以）上传

2.多个文件（图片或视频都可以）上传 （需要使用FormData来存储表单数据）

node+express+multer实现单个或多个图片文件，视频文件上传相关推荐

最新文章

热门文章

2.多个文件（图片或视频都可以）上传（需要使用FormData来存储表单数据）