Express + Element-ui 实现图片/文件上传

使用第三方插件 formidable 处理表单数据/文件

Express 4 以前,我们通常使用 req.files 来对请求中的文件进行处理,但在 Express 4 中这种用法已经被抛弃,默认情况下 req.filesreq 对象上不再可用。官方推荐我们使用第三方中间件。
1136673-20180829091559198-569891639.png
在这里我们使用第三方中间件 formidable,可用于解析表单数据和上传的文件。以下是基本使用:

var formidable = require('formidable')app.post('/upload', (req, res, next) => {var form = new formidable.IncomingForm()form.parse(req, (err, fields, files) => {if(err) return next(err)console.log(fields) //Object 表单数据console.log(files) //上传文件用files.<name>访问res.json({ code: 1, message: 'upload success' })})
})

Element-ui -- upload 上传组件

前端框架使用Vue2, 以头像上传为例。

<el-upload :action="$apiURL + '/upload'" <!--后台上传地址--> :data="uploadData" <!--需要传到后台的附加数据 我这里把用户名传了过去-->:show-file-list="false" :on-success="getAvatarSuccess" <!--上传成功回调--> :before-upload="beforeAvatarUpload"> <!--上传前调用的钩子--> <img :src="$imageURL + avatar" class="avatar" />
</el-upload>
export default {data(){return {avatar: '', //头像文件名 使用时需要拼接形成完整路径uploadData: {//使用 vuex 将用户名放在了 state 中 便于存取name: this.$store.state.username}}},methods: {getAvatarSuccess(res, file) {// res是响应数据 file是文件信息this.avatar = res.avatarconsole.log(res) // 本例中是  { avatar: 'xxx.jpg' }},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg'const isLt2M = file.size / 1024 / 1024 < 2if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!')}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!')}//返回 true 时进行请求上传return isJPG && isLt2M }}
}

Express 中使用 formidable 处理请求做出响应

app.post('/upload', (req, res, next) => {let form = new formidable.IncomingForm()form.encoding = 'utf-8' // 编码form.keepExtensions = true // 保留扩展名form.uploadDir = path.join(__dirname, '../public/images/') //文件存储路径 最后要注意加 '/' 否则会被存在public下form.parse(req, (err, fileds ,files) => { // 解析 formData 数据if(err) return next(err) let username = fileds.name //用户名 用于修改用户头像路径let oldPath = files.file.path //获取文件路径 ~/public/images/<随机生成的文件名>.<扩展名>let imgname = files.file.name //前台上传时的文件名 也就是文件原本的名字let userImgname = imgname.replace(/[^.]+/, username) //把扩展名前的文件名给替换掉//我这里为了方便存储 统一将文件名改为 <用户名>.jpglet newPath = path.join(path.dirname(oldPath), userImgname) fs.rename(oldPath, newPath, (err) => {if(err) return next(err)Model.User.updateOne({ name: username },  //更新用户的avatar属性{ avatar: userImgname }, err => {if(err) return next(err)res.json({ avatar: userImgname })                     })})})
})

转载于:https://www.cnblogs.com/qimeng/p/9552275.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249620.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

10-04 矩形覆盖(斐波那契数列的应用)

题目描述&#xff1a; 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形。请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形&#xff0c;总共有多少种方法&#xff1f; 解题思路与代码&#xff1a; 1&#xff09; 排列组合&#xff1a; class Solution { public:int rectC…

Spring 源码分析 spring-core

先来看下 spring-core 的包结构 总共有6个模块&#xff0c;分别是 asm、cglib、core、lang、objenesis、util asm包&#xff1a; 用来操作字节码&#xff0c;动态生成类或者增强既有类的功能。主要包含以下这些类。详细功能。 https://www.ibm.com/developerworks/cn/java/j…

大数据项目中的QA需要迎接新的挑战

大数据项目中的QA需要迎接新的挑战根据IDC全球半年度大数据和分析支出指南的最新预测&#xff0c;到2022年全球大数据和业务分析解决方案的收入将达到2600亿美元。在大数据和业务分析解决方案上投资增长最快的行业包括银行&#xff08;复合年增长率13.3%&#xff09;、医疗、保…

spring源码分析之spring-core总结篇

1.spring-core概览 spring-core是spring框架的基石&#xff0c;它为spring框架提供了基础的支持。 spring-core从源码上看&#xff0c;分为6个package&#xff0c;分别是asm&#xff0c;cglib&#xff0c;core&#xff0c;lang&#xff0c;objenesis和util。 1.1 asm 关于as…

五分钟搞懂后缀数组!

为什么学后缀数组 后缀数组是一个比较强大的处理字符串的算法&#xff0c;是有关字符串的基础算法&#xff0c;所以必须掌握。 学会后缀自动机(SAM)就不用学后缀数组(SA)了&#xff1f;不&#xff0c;虽然SAM看起来更为强大和全面&#xff0c;但是有些SAM解决不了的问题能被SA解…

spring-core

spring最核心的组件是BeanFactory&#xff0c;看了源码才发现&#xff0c;BeanFactory并非定义在spring-core中&#xff0c;那spring-core都有啥东东&#xff1f; spring-core主要提供以下服务&#xff0c;为BeanFactory的定义提供基础服务。 1, ConversionService Conversi…

nginx配置静态文件过期时间

1. 编辑虚拟主机配置文件/usr/local/nginx/conf/vhosts/huangzhenping.conf 说明&#xff1a;采用location方式 12345678910location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${access_log off;expires 1d;}location ~ \.(js|css){access_log off;expires 1d;}2. 检查配置文件&#x…

Spring Beans 初始化流程分析

测试用例 依然使用这个官网上的用例&#xff0c;来进行调试&#xff1b; Person.java package org.shangyang.spring.container;/**- - author shangyang**/public class Person {String name;Person spouse;public String getName() {return name;}public void setName(Stri…

VSCode中怎么改变文件夹的图标

昨天更新了VSCode后我的文件夹图标莫名其妙的没有了&#xff0c;变成了下图这样 看着真的让我难受的头皮发麻&#xff0c;本来打代码就头发少&#xff0c;难道非要让我变成秃头&#xff0c;不可能不可能&#xff0c;所以我找了找怎么解决 来&#xff0c;各位看官上眼 如图所示 …

springxml解析

1.XML验证模式的认识 首先XML的验证模式有两种&#xff1a;DTD和XSD。 DTD文档类型定义&#xff0c;是XML约束模式语言。它是为了保证XML文档格式正确有效的方法。通过XML文档和DTD文档的比较来判断XML是否符合规范。(现在我很少见&#xff0c;不知道是不是淘汰了) 举个例子&…

github中的watch、star、fork的作用

在每个 github 项目的右上角&#xff0c;都有三个按钮,分别是 watch、star、fork&#xff0c;但是有些刚开始使用 github 的同学&#xff0c;可能对这三个按钮的使用却不怎么了解&#xff0c;包括一开始使用 github 的我也是如此&#xff0c;这篇博客&#xff0c;结合自己的理解…

spring 源码-context

1 spring-context 模块概要 该模块主要实现在spring-beans 模块的扩展&#xff0c;主要对aop支持及el表达式的实现 分析示例 public static void main(String[] args){ClassPathXmlApplicationContext context new ClassPathXmlApplicationContext("spring-aop.xml"…

标示符和关键字的总结--希望别再犯错

&#xff08;一&#xff09;Java关键字的表 一共50个关键字&#xff0c;如下表 其中绝大部分关键词是Java语法发布之初就约定好的&#xff0c;少部分关键词是随Java语言发展后加入的。 strictfp JDK1.2 加入 assert JDK1.4 加入 enum JDK5.0 加入 还有少数单词&#xff0c;目前…

历届试题 打印十字图

问题描述 小明为某机构设计了一个十字型的徽标&#xff08;并非红十字会啊&#xff09;&#xff0c;如下所示&#xff1a; ..$$$$$$$$$$$$$....$...........$..$$$.$$$$$$$$$.$$$$...$.......$...$$.$$$.$$$$$.$$$.$$.$...$...$...$.$$.$.$$$.$.$$$.$.$$.$.$...$...$.$.$$.$.$.…

Spring BeanDefinition

BeanDefinition&#xff0c;顾名思义&#xff0c;是一个对象(Bean)在Spring中描述&#xff0c;其核心类图&#xff1a; 从类图我们详细了解BeanDefinition。 BeanDefinition接口继承自BeanMetadataElement和AttributeAccessor两个接口。 BeanMetadataElement&#xff1a;bean…

乐尚网络:小程序商城零售行业10大新赋能

微信小程序上线以来&#xff0c;各行各业积极入场小程序&#xff0c;着手打造属于自己的小程序生态。小程序形态多样&#xff0c;适合你的小程序才是最好的&#xff1b;在众多形态中&#xff0c;小程序商城可以说是零售行业的主体形态了&#xff0c;因为通过平台直接实现交易是…

深度学习中的正则化

正则化方法有如下几种&#xff1a; 一、参数范数惩罚 其中L2、L1参数正则化介绍与关系如下 1、L2 参数正则化 直观解释如下&#xff1a; 2、L1 参数正则化 二、获取更多数据&#xff08;扩样本&#xff09; 避免过拟合的基本方法之一是从数据源获得更多数据&#xff0c;当训练数…

spring uml

spring执行流程&#xff1a; 1&#xff1a; 加载spring.xml文件 2&#xff1a; 创建xml文件解析器 3&#xff1a; 获取命名空间&#xff0c;即在spring.xml文件中的 http://www.springframework.org/schema/context 4&#xff1a; 根据命名空间找到命名空间处理器&#xff0c;在…

「造个轮子」——cicada(轻量级 WEB 框架)

前言 俗话说 「不要重复造轮子」&#xff0c;关于是否有必要不再本次讨论范围。 创建这个项目的主要目的还是提升自己&#xff0c;看看和知名类开源项目的差距以及学习优秀的开源方式。 好了&#xff0c;现在着重来谈谈 cicada 这个项目的核心功能。 我把他定义为一个快速、轻量…

基于owncloud构建私有云储存网盘

注意事项&#xff1a;需要ping通外网 需要LAMP架构yum -y install httpd php php-mysql mariadb-server mariadb sqlite php-dom php-mbstring php-gd php-pdo 开启服务[rootowncloud ~]# setenforce 0setenforce: SELinux is disabled[rootowncloud ~]# systemctl stop firewa…