Vue + ElementUI + ExpressJS实现上传头像的功能
2020-04-22 02:13
761 查看
前端代码
1. 首先我们需要用到elementUI的upload组件
<el-upload class="avatar-uploader" :show-file-list="false" :http-request='uploadAvatar' :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
- http-request钩子函数:可以覆盖默认的上传行为,可以自定义上传的实现。
- brfore-upload钩子函数:在文件上传前进行操作,比如判断是否符合要求。
2. 实现brfore-upload钩子函数
beforeAvatarUpload(file) { this.file = file this.fileName = file.name this.fileType = file.type const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' const isLt2M = file.size / 1024 / 1024 < 2; if (!isImage) { this.$message.error('上传头像图片只能是 JPG | PNG | GIF 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isImage && isLt2M; },
- 如上图代码所示,我们规定了只能是三种格式,并且大小不能超过2MB
3. 实现http-reuqest钩子函数
uploadAvatar() { // 使用formData进行文件上传 let formData = new FormData() formData.append('fileName', this.fileName) // 文件名字 formData.append('file', this.file) // 当前文件 formData.append('name', this.$store.getters.userInfo.name) // 当前登录的用户的名字 formData.append('staff_num', this.getStaffNum) // 当前登录用户的员工编号,在数据库查找时会用到 formData.append('host', `//${window.location.hostname}:5000`) // 把当前主机名传过去,后端利于拼接并且存放在数据库 let url = 'http://localhost:5000/api/avatar/uploadAvatar' let xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { let res = JSON.parse(xhr.responseText) this.$message.success(`${res.data.msg}`) let dominName = window.location.hostname this.getUser.avatar = `//${dominName}:5000${res.data.fileUrl}` // 这一步的目的是把vuex里存放的avatar的值也改变 let user = this.getUser this.$store.dispatch('setUserInfo', user) // 更新vuex setTimeout(() => { location.reload() // 300ms之后,刷新页面。否则上传图像之后它不会自动改变 }, 300) } } xhr.open('post', url) xhr.setRequestHeader('Authorization', localStorage.jwtToken) // 由于后端使用了jwt验证。所以这里要设置一下请求头 xhr.send(formData)
总结一下:文件上传必须使用formData。请求方法可以用jQuery的ajax,也可以使用xmlHttpRequest。本文使用的就是xmlHttpRequest
后端代码
4. 安装forimidable来解析上传的文件
npm i forimidable --save
这时可能有同学会问,什么是forimidable?
formidable : Node.js模块,用于解析表单数据,特别是文件上传。
5. 解析图片
let form = new forimidable.IncomingForm() form.uploadDir = path.join(__dirname, '../../public/avatars') // 设置静态资源路径 form.keepExtensions = true // 使用源文件的扩展名 form.parse(req, (err, fields, files) => { if (err) return res.json(err) let extName = '' // 文件后缀 switch(files.file.type) { // 这一步的目的是设置文件后缀 case 'image/jepg': extName = 'jpg' break case 'image/png': extName = 'png' break case 'image/gif': extName = 'gif' break default: extName = 'jpg' break } let avatarName = `${fields.name}'s_avatar.${extName}` // 根据传过来的用户名以及上面获取到的后缀名拼接出新的头像的名字 let newPath = form.uploadDir + '/' + avatarName // 获取头像的路径 fs.rename(files.file.path, newPath, (err) => { // 这一步是重命名,files.file.path是原始文件路径,newPath是上方拼接出来的。 // 同时,重命名还可以避免同一用户上传多个文件。占用服务器资源。 if (err) return res.json({data: {code: 400, msg: '操作失败'}}) // 接下来是将图片地址更新到数据库~ let update = { avatar: `${fields.host}/avatars/${avatarName}` } // 把图片地址更新到数据库 User.findOneAndUpdate({name: fields.name, staff_num: fields.staff_num}, {$set: update}, {new: true}).then(user => { res.json({data: { code: 200, msg: '操作成功', }}) }).catch(err => res.json({data: {code: 500, msg: 'something error!'}})) }) })
tips:将头像地址存放到数据库仅仅是更新一下。前端使用的还是更新的vuex里面的数据。 如图 ↓
如果要部署到服务器怎么办?
服务器一般监听80端口,所以拼接地址的时候就不需要 ‘:5000’ 了
以上就是简单的实现上传头像功能。谢谢翻看~
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图)
- vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
- node.js+express 实现CSDN上传头像功能 (包含图片的缩放,生成头像缩略图)
- Vue Element UI + OSS实现上传文件功能
- vue+elementUI实现图片上传功能
- vue+elementUI实现表单和图片上传及验证功能示例
- Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
- Vue + node.js(Express) 项目中实现换头像与文件上传
- Vue + Vue-router + Element-ui 实现研究生管理系统中的“学生类型”页面功能实现
- Vue+Springboot实现头像上传功能
- vuejs+element UI table表格中实现禁用部分复选框的方法
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- vue基于element-ui的三级CheckBox复选框功能的实现代码
- .Net Core+Vue.js+ElementUI 实现前后端分离
- vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
- VUE+Element学习笔记(一)VUE+ElementUI实现登录功能
- vue-cli + ElementUI 实现自定义接口上传图片
- elementUI+koa实现图片上传功能
- vue实现element-ui对话框可拖拽功能
- vue+element-ui+axios实现图片上传