本文实例为大家分享了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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did124386