好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

查看更多关于vue实现头像上传功能的详细内容...

  阅读:28次