vue 借用element-ui实现头像上传 axios发送请求

 <!-- 上传组件 -->
    <!-- 总结一下:
    action  写图片上传请求的路径 去路径哈
    show-file-list就是当你上传时,是否会显示出上传的是哪一个图片,一般为false
    handleAvatarSuccess它是成功的回调
    beforeAvatarUpload:上传之前做的一些事情在本页面中你不点击按钮  图片也会显示出来  element-ui中的上传组件 在action时,写了上传地址,当你选择好图片,就自动帮你上传了
   
<template>
  <div>

    <el-upload
      class="avatar-uploader"
      action="http://127.0.0.1:666/login/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="avatarUrl" :src="avatarUrl" class="avatar" />

      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
         //在本页面中你不点击按钮  图片也会显示出来
    <el-button @click="saveAvatar">获取图片请求</el-button>

    <!-- 图片回显示  比如它回显在顶部头像,我放在这里是方便演示-->
    <div class="avatar">
      <img width="100%" height="100%" :src="avatarUrl" alt />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      avatarUrl: "http://127.0.0.1:8080/avatar.jpg" //默认头像
    };
  },
  methods: {
    // 上传成功的函数
    handleAvatarSuccess(res, file) {
      // 上传成功 回显图片
      this.avatarUrl = URL.createObjectURL(file.raw);
      console.log(URL.createObjectURL(file.raw));
    },

    // 上传之前的限制函数
    beforeAvatarUpload(file) {
      // 类型
      const isJPG = file.type === "image/jpeg";
      // 大小
      const isLt2M = file.size / 1024 / 1024 < 2;
      // 类型限制
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      // 大小限制
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 回去头像的请求
    getAvatar() {
      this.req
        .get("/login/getavatar")
        .then(response => {
          let data = response.data;
          this.avatarUrl =
            "http://127.0.0.1:666" + data[data.length - 1].imgUrl;
          // console.log(data[data.length - 1].imgUrl);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    // 获取头像
    this.getAvatar();
  }
};
</script>
<style lang="less" scoped>
.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-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

原文地址:https://www.cnblogs.com/IwishIcould/p/11980091.html

时间: 2024-10-01 00:48:42

vue 借用element-ui实现头像上传 axios发送请求的相关文章

net MVC +Vue.js+Element UI 笔记

最近项目需求要用到Vue 与 Element UI.但是又不想用Node.js.就结合了Net.MVC来做项目开发.故而做个笔记来记录一些遇到的问题和处理思路 用到MVC主要考虑是到 对 Node.js 不是特别了解.不想给自己埋坑. 而且基于MVC的话,能用到MVC的服务器端渲染,Session,验证,路由机制等等还是非常和嗨皮的. 然而集合MVC的话,比较烦的是在做可复用Component和JS文件的封装上没Node.js那么方便. Note:不得不吐槽,Vue.js简直和Flash Fle

Canvas处理头像上传

未分类 最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到这些问题,最后我们选用Canvas来完成图像尺寸缩放和图片数据获取. 等边处理 头像一般都是正方形,首先我们需要获取图片宽度和高度的最小值,用该最小值作为边长居中裁剪图片,最终得到一个正方形的图片: var ImageEditor = function() { // 用离线canvas处理图片数据

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有: 1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定) 2.el-form rules,model属性绑定,ref标识 自定义表单验证的坑: 一.valid

Vue框架Element UI教程(二)

原文:https://www.jianshu.com/p/1704b5935a8 [时间选择器] Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 前一篇已经安装好了Element UI环境,现在开始来实际操作框架提供的一些组件的运用了. 在准备好以下文章里面的内容

富头像上传编辑器文档(from www.sysoft.cc)

调用方法 new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]); 返回值:object,该对象可调用call方法,请参见 call方法. swfContainerID 用以包裹Flash的HTML元素的ID. height Flash的高度,默认为 600. width Flash的宽度,默认为 630. flashvars 配置参数 名称 类型 默认值 描述 id String fullAv

Java头像上传方法

import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; /** * Created by Zenz. */ public class Upload { /** * 头像上传 * @param headImage 头像传出文件 * @param reque

头像上传组件,后台安全控制

http://www.hdfu.net/demo.html flash头像上传组件 http://deepliquid.com/content/Jcrop.html jcrop组件   裁切头像 登录数据库表的建立 create table hnsc_user( account varchar(50) primary key, pwd varchar(50), -- 密码 truename varchar(50),-- 真是姓名 face varchar(200), -- 注册时上传的头像 wh

[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化<input type="file">的显示样式,基础的样式实在太难看了. 上传的头像需要进行质量压缩跟大小裁剪,以减缓浏览器的压力. 成果预览: 使用到的技术插件 Jcrop:用于前端"裁剪"图片 bootstrap-fileinput:用于前端优化上传控件样

php头像上传预览

php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submit刷新式上传.我为大家介绍两种异步非刷新式上传图片+图片预览:第一种,通过现成的uploadfy插件进行上传,网上好多实例.不过我重点为大家介绍的是第二种,通过Ajax上传图片.因为使用uploadfy插件需要设备支持swf格式的Flash,所以对大多数手机来说,第一种方式就