文件上传

文件上传就是把图片、音视频等文件上传到服务端，文件上传必须使用post请求，数据格式为multipart/form-data的数据。

服务端

在nodejs中处理文件，需要使用multer模块来处理multipart/form-data格式的数据。

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

注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。

中文文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

安装multer

npm install --save multer

使用

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

const multer = require('multer');const uploadPath = './public/imgs';const storage = multer.diskStorage({// destination 是用来确定上传的文件应该存储在哪个文件夹中destination: function (req, file, cb) {cb(null, uploadPath);},// filename 用于确定文件夹中的文件名的确定。 如果没有设置 filename，每个文件将设置为一个随机文件名，并且是没有扩展名的。filename: function (req, file, cb) {cb(null, Date.now() + '-' + file.originalname);},
});const upload = multer({// 设置上传的文件存储位置storage: storage,// 文件上传限制:单位字节limits: { fileSize: 1024 * 1024 * 2 },// 文件过滤：决定哪些文件可以上传，哪些文件跳过fileFilter: function (req, file, cb) {if (file.mimetype.startsWith('image')) {cb(null, true); // 接收这个文件} else {cb(null, false); // 拒绝这个文件}},
});//设置post请求处理图片上传
// upload.single(name) 单个文件上传
// upload.array(name,maxCount) 多个文件上传：name参数是文件选择input框的name属性，maxCount 最大上传数量
router.post('/upload', upload.single('myfile'), function (req, res) {// multer将请求中的文件存储之后，会把文件的信息(包括文件存储时的文件名)放入req.file对象中。(如果用的是upload.array，则会放在req.files中)// multer还会把本次表单提交的文本字段(如果有)解析为对象存入req.body中// console.log('文件：',req.file);if (req.file) {res.json({ error: 0, data: '上传成功' });} else {res.json({ error: 0, data: '上传失败' });}
});

客户端

文件上传必须使用post请求，数据使用 multipart/form-data 类型的表单数据。

有如下HTML结构

<form><div id="upload-box"><img class="img" src="./imgs/add.png"><input class="upfile" type="file" name="myfile" accept="image/*" hidden></div><input class="upload" type="button" value="上传">
</form>

// 因为默认的input[type=file]标签长的丑，所以我们把它隐藏掉，但是依然保留其click的功能。
// 当点击div时，调用input[type=file]标签的click()方法，即可打开选择文件对话框
$("#upload-box").on("click", ".img", function () {$(this).next().click();
});//显示图片(添加显示图片的代码)
var file = null;
$("#upload-box").on("change", ".upfile", function () {file = this.files[0];if (!file.type.startsWith('image')) {layer.msg('只能上传图片')file = null;return;}$('.upfile').prev().attr("src", URL.createObjectURL(file));
});$('.upload').click(function (ev) {if (!file) {return alert('请选择图片')}var data = new FormData($('form').get(0));axios({url: '/upload',method: 'POST',data: data,}).then(res => {layer.msg(res.data.data)})
});

头像系统

/user.jsconst mongoose = require('./db');const userSchema = new mongoose.Schema({username:String,password:String,age:Number,gender:Number,//0 男；1 女major:String,hobby:Array,avatar:{type:String,// 默认值default:'http://127.0.0.1:3000/imgs/timg.jpg'}
});let User = mongoose.model('user-avatar',userSchema);module.exports = User;

//upload.jsconst express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');let User = require('../modules/user');
let router = express.Router();
const jwt = require('../modules/jwt');let uploadpath = './public/imgs/'; // 图头像上传地址
const imgURL = 'http://127.0.0.1:3000/imgs/'; // 头像网路地址
let avatarName; // 头像名字let storage = multer.diskStorage({destination: function (req, file, cb) {cb(null, uploadpath);},filename: function (req, file, cb) {let extname = path.extname(file.originalname);// 张三-1834137249801230921.pngavatarName = req.username + '-' + Date.now() + extname;cb(null, avatarName);},
});
let isImage = false;
let upload = multer({storage: storage,limits: {fileSize: 1024 * 1024 * 5,},fileFilter: function (req, file, cb) {if (file.mimetype.startsWith('image')) {isImage = true;cb(null, true);} else {isImage = false;cb(null, false);}},
});router.post('/user/avatar', jwt.verify, upload.single('avatar'), (req, res) => {if (!isImage) {res.json({ error: 1, data: '只能上传图片' });return;}// 如果现在的头像不是默认图片，删除现有的头像(旧头像)，保存新上传的头像地址if (fs.existsSync(uploadpath + avatarName)) {User.findOne({ _id: req._id }, (error, user) => {// 如果用户有旧头像，则先删除旧头像文件，然后把新头像文件的url存入用户信息if (user.avatar != imgURL + 'timg.jpg') {let oldpath = user.avatar.replace(imgURL, 'public/imgs/');if (fs.existsSync(oldpath)) {fs.unlinkSync(oldpath); //删除旧头像}}// 保存新头像user.avatar = imgURL + avatarName; //新头像的地址user.save(error => {res.json({ error: 0, data: '上传成功' });});});} else {res.json({ error: 0, data: '上传失败' });}
});module.exports = router;

nodejs实现文件/头像上传相关推荐

layui文件上传(头像上传)
头像上传头像上传大概流程就是选择电脑上的文件图片然后上传到服务器服务器存起来然后上传到浏览器中,服务器需要用到磁盘存储模块(multer),需要下载安装 multer是Nodejs中用于处理文件上传 ...
springboot 头像上传文件流保存文件流返回浏览器查看区分操作系统 windows 7 or linux...
1 //我的会员中心头像上传接口 2 /*windows 调试*/ 3 @Value("${appImg.location}") 4 private String winPath ...
解决文件上传_使用FastDfs上传头像上传不成功的问题---SpringCloud Alibaba_若依微服务框架改造---工作笔记002
在若依的微服务版框架中,使用了vue-cropper 截图组件,进行头像的上传关于vue-cropper 截图组件的使用网上一大堆. 但是发现如果把文件上传途径切换为,采用FastDfs文件上传的会 ...
php文件用户头像上传代码,网页web上传用户头像代码实现（美图秀秀开放）
网页web上传用户头像代码实现(美图秀秀开放) 在制作论坛或者一些门户社交网站的时候,经常要获取用户的头像.之前我们一般都是自己制作flash插件头像上传.或者用js来自己开发一个头像上传功能.比如有 ...
nodejs的express实现上传文件到七牛
本文实现上传文件到七牛,动态切换上传空间,MD5设置key值,点击复制七牛返回的链接. 在七牛中注册开发者,获取key 七牛官网--管理控制台(偏右上角)--个人中心(获取秘钥)--对象存储,新建存储 ...
jsp文件上传头像上传
前言: 这篇文章简单介绍了文件上传的代码和我遇到的一些问题以及基于我实现的头像上传(不包含框架,仅仅达到目标即可) 一.整体效果: (1)头像显示 (2)文件上传 (3)完成头像修改 (4)查看文件目 ...
nodeJs中间件Multer详解_使用express实现本地文件/图片上传到服务器指定目录
最终实现的效果,更改Input的值后,将图片显示出来.输入描述信息,提交后,图片上传到后台对应的路径下. Multer Multer 是一个node.js中间件,用于处理 multipart/form ...
SpringMVC实现文件的上传和下载
SpringMVC实现文件的上传和下载http://www.bieryun.com/1120.html 前些天一位江苏经贸的学弟跟我留言问了我这样一个问题:"用什么技术来实现一般网页上文件的 ...
php上传头像的代码,php头像上传预览实例代码
说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submi ...

nodejs实现文件/头像上传

文件上传

服务端

安装multer

使用

客户端

头像系统

nodejs实现文件/头像上传相关推荐

最新文章

热门文章