vue实现头像上传功能
作者:Magic林
这篇文章主要为大家详细介绍了vue实现头像上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现头像上传的具体代码,供大家参考,具体内容如下
1.创建项目,使用vue-admin-template框架
2.使用vue命令在终端(开发工具VScode)输入npm install,即可按package.json文件下载
3.导入相关工具包,是上传头像的样式更好看
4.在views编写vue文件
<template> <div class="app-container"> <el-form-item label="讲师头像"> <el-upload :show-file-list="true" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :before-upload="beforeAvatarUpload" class="avatar-uploader" :action="BASE_API+'/eduOss/fileOss'"> <img v-if="teacher.avatar" :src="teacher.avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"/> </el-upload> </el-form-item> <span style="margin-left: 8.7%;font-size: 20px; font-weight: 400;">*点击图片框修改头像*</span> <br /><br /><br /> <el-form-item> <el-button :disabled="saveBtnDisabled" plain="true" type="primary" @click="saveOrUpdate">保存</el-button> </el-form-item> </el-form> </div> </template> <script> //引入上传头像的功能组件 import ImageCropper from '@/components/ImageCropper' import PanThumb from '@/components/PanThumb' export default { components: {ImageCropper,PanThumb}, //组件的声明 data() { return { }, //v-model双向绑定 imagecropperShow: false, //上传弹框组件是否显示 imagecropperKey: 0, //上传组件唯一标识 BASE_API: process.env.BASE_API, //获取dev.env.js里面地址 saveBtnDisabled: false //保存按钮是否禁用 } }, created() { //页面渲染前执行 }, watch: { //vue的监听 $route(to, from) { //路由变化方式,路由一发生变化 就执行方法 this.init() } }, methods: { // 文件上传成功 handleAvatarSuccess(response) { if (response.success) { this.teacher.avatar = response.data.url // 强制重新渲染 this.$forceUpdate() } else { this.$message.error('上传失败! (非20000)') } }, // 文件上传失败(http) handleAvatarError() { this.$message.error('上传失败! (http失败)') }, // 上传校验 beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg' const isLt3M = file.size / 1024 / 1024 < 3 if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!') } if (!isLt3M) { this.$message.error('上传头像图片大小不能超过 2MB!') } return isJPG && isLt3M }, } } </script> <style> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar-uploader img { width: 178px; height: 178px; display: block; } </style>
该代码是上传文件头像的前端代码的片段,样式和上传到页面功能,上传到阿里云服务器还需要和后端功能连接,比如添加时,后端将上传文件的url拼成字符串保存到数据库,在前端则要写入相关保存功能,连接后端,并在data中写保存的相关数据,methods中写保存的方法等,该代码可以在实现需要上传头像文件是加如个人代码进行修改即可.
使用环境是node.js
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。