亲宝软件园·资讯

展开

vue头像上传功能

Magic林 人气:0

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

加载全部内容

相关教程
猜你喜欢
用户评论