vue 头像上传裁剪

<div>

<el-breadcrumb

style="margin:20px 0 0 20px"

separator-class="el-icon-arrow-right"

<el-breadcrumb-item>账号中心</el-breadcrumb-item>

<el-breadcrumb-item>基本信息</el-breadcrumb-item>

</el-breadcrumb>

<el-card shadow="hover" class="card" style="margin-top:20px">

<el-image :src="gerenuserInfos.headUrl"></el-image>

</div>

<el-descriptions style="margin-left:30px">

<el-descriptions-item label="用户姓名：">{{ gerenuserInfos.userName }}</el-descriptions-item>

<el-descriptions-item label="手机号：">{{ gerenuserInfos.mobilPhone }}</el-descriptions-item>

<el-descriptions-item label="身份证：">{{ gerenuserInfos.cardNo }}</el-descriptions-item>

<el-descriptions-item label="邮箱：">

</el-descriptions-item>

</el-descriptions>

<!-- <div class="middle">

用户姓名：   

<div style="font-weight:bold;margin-left:26px">{{ gerenuserInfos.userName }}</div>

</div>

手机号：         

<div style="font-weight:bold;margin-left:40px">{{ gerenuserInfos.mobilPhone }}</div>

</div>

身份证：   

<div style="font-weight:bold;margin-left:40px">{{ gerenuserInfos.cardNo }}</div>

</div>

邮箱：   

<div style="font-weight:bold;margin-left:56px">{{ gerenuserInfos.email }}</div>

</div>

</div> -->

<!-- <div class="right">

身份证：

<div >{{ gerenuserInfos.cardNo }}</div>

</div>

邮箱：

<div >{{ gerenuserInfos.email }}</div>

</div>

</div> -->

<el-button

type="primary"

icon="el-icon-edit"

plain

class="btn"

size="small"

@click="EditInformation"

>编辑信息</el-button

</el-card>

<el-dialog

title="编辑信息"

:visible.sync="dialogVisible"

width="30%"

@close="btnCancel"

<el-form

:model="UserInfo"

label-width="120px"

:rules="rules"

ref="ruleForm"

<el-form-item label="用户姓名：">

<el-input v-model="UserInfo.userName" disabled></el-input>

</el-form-item>

<el-form-item label="手机号：" prop="mobilPhone">

<el-input

v-model="UserInfo.mobilPhone"

οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"

onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"

></el-input>

</el-form-item>

<el-form-item label="身份证：" prop="cardNo">

<el-input

v-model="UserInfo.cardNo"

οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"

onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"

></el-input>

</el-form-item>

<el-form-item label="邮箱：" prop="email">

<el-input v-model="UserInfo.email"></el-input>

</el-form-item>

</el-form>

<el-button @click="btnCancel">取消</el-button>

<el-button type="primary" @click="btnOk">确定</el-button>

</span>

</el-dialog>

<el-dialog title="编辑头像" :visible.sync="imgDialog">

<el-upload

class="upload-demo"

ref="upload"

action="#"

:before-upload="beforeUpload"

:on-preview="handlePreview"

:on-remove="handleRemove"

:auto-upload="true"

:show-file-list="false"

<el-button slot="trigger" size="small" type="primary"

>选择图片</el-button

<el-button

style="margin-left: 10px;"

size="small"

type="success"

@click="submitUpload"

>上传头像</el-button

</el-upload>

</div>

<div

class="cropper-content"

style="margin-top:30px;margin-left:30px;"

<vueCropper

ref="cropper"

:img="option.img"

:outputSize="option.size"

:outputType="option.outputType"

:info="true"

:full="option.full"

:canMove="option.canMove"

:canMoveBox="option.canMoveBox"

:original="option.original"

:autoCrop="option.autoCrop"

:autoCropWidth="option.autoCropWidth"

:autoCropHeight="option.autoCropHeight"

:fixedBox="option.fixedBox"

@realTime="realTime"

@imgLoad="imgLoad"

></vueCropper>

</div>

<!-- <div style="margin-left:20px;">

<div

class="show-preview"

:style="{

width: '150px',

height: '155px',

overflow: 'hidden',

margin: '5px'

></div>

</div> -->

</div>

</el-dialog>

</div>

</template>

import VueCropper from 'vue-cropper'

Vue.use(VueCropper);

import { Aside } from "element-ui";

import { queryBaseUserInfo, updateBaseUserInfo, uploadHead } from "./api.js";

export default {

data() {

// 身份证号校验

var checkIdNum = (rule, value, callback) => {

const reg = /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;

if (!value) {

return callback(new Error("证件号码不能为空"));

} else if (!reg.test(value)) {

return callback(new Error("证件号码不正确"));

} else {

callback();

}

};

// 检验邮箱

var checkEmail = (rule, value, cb) => {

const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

if (regEmail.test(value)) {

// 合法的邮箱

return cb();

}

cb(new Error("请输入合法的邮箱"));

};

// 校验手机号

var checkMobile = (rule, value, cb) => {

const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;

if (regMobile.test(value)) {

// 合法的手机号码

return cb();

}

cb(new Error("手机号码格式不正确"));

};

return {

gerenuserInfos: {}, // 用户个人信息

option: {

img: "",

outputSize: 1, //剪切后的图片质量（0.1-1）

full: false, //输出原图比例截图 props名full

outputType: "png",

canMove: true,

original: false,

canMoveBox: true,

autoCrop: true,

autoCropWidth: 150,

autoCropHeight: 150,

fixedBox: false

fileName: "",

imgUrl: "", // 图片路径

previews: {}, //实时预览图数据

attach: {

//后端附件表

id: "",

userId: "",

customaryUrl: "", //原图片路径

laterUrl: "", //裁剪后图片路径 /static/logo.png

attachType: "photo" //附件类型

dialogVisible: false, // 弹层信息

imgDialog: false, // 头像裁剪弹层

UserInfo: {

userName: "", // 用户姓名

operatorId: "",

mobilPhone: "", // 电话号码

cardNo: "", // 身份证号码

email: "" // 邮箱

fileList: {},

rules: {

mobilPhone: [

{ required: true, message: "手机号不能为空", trigger: "blur" },

{

validator: checkMobile,

trigger: "blur"

}

cardNo: [

{ required: true, message: "身份证不能为空", trigger: "blur" },

{

validator: checkIdNum,

trigger: "blur"

}

email: [

{ required: true, message: "邮箱不能为空", trigger: "blur" },

{

validator: checkEmail,

trigger: "blur"

}

]

}

};

created() {

mounted() {

this.getUserInfo();

methods: {

SuccessFlie(res) {

console.log(res);

// 获取用户基本信息

async getUserInfo() {

const res = await queryBaseUserInfo();

if (res.recode == 200) {

this.gerenuserInfos = res.redata;

console.log(res);

} else {

this.$message.warning("请求失败，请稍后重试");

}

submitUpload(file) {

// this.$refs.upload.submit();

this.finish("blob");

handleRemove(file, fileList) {

console.log(file, fileList);

handlePreview(file) {

console.log(file);

beforeUpload(file) {

this.fileList = file;

console.log(file);

let data = window.URL.createObjectURL(new Blob([file]));

this.fileName = file.name;

this.option.img = data;

//放大/缩小

changeScale(num) {

console.log("changeScale");

num = num || 1;

this.$refs.cropper.changeScale(num);

//坐旋转

rotateLeft() {

console.log("rotateLeft");

this.$refs.cropper.rotateLeft();

//右旋转

rotateRight() {

console.log("rotateRight");

this.$refs.cropper.rotateRight();

//上传图片（点击上传按钮）

finish(type) {

let _this = this;

let formData = new FormData();

formData.append("file", this.fileList);

// 输出

if (type === "blob") {

this.$refs.cropper.getCropBlob(data => {

console.log(this.fileList);

let img = window.URL.createObjectURL(data);

this.model = true;

this.modelSrc = img;

});

console.log(formData);

uploadHead(formData).then(res => {

if (res.recode == 200) {

this.getUserInfo();

this.imgDialog = false;

this.$message.success("操作成功");

} else {

this.$message.warning("操作失败，请稍后重试");

}

console.log(res);

});

} else {

this.$refs.cropper.getCropData(data => {

this.model = true;

this.modelSrc = data;

});

}

// 实时预览函数

realTime(data) {

console.log("realTime");

this.previews = data;

imgLoad(msg) {

console.log("imgLoad");

console.log(msg);

modify() {

this.imgDialog = true;

handleClose() {

this.imgDialog = false;

async EditInformation() {

this.UserInfo = this.gerenuserInfos;

this.dialogVisible = true;

btnCancel() {

this.$refs.ruleForm.resetFields();

this.dialogVisible = false;

btnOk() {

this.$refs.ruleForm.validate(async isOk => {

if (isOk) {

// 修改用户基本信息

const res = await updateBaseUserInfo(this.UserInfo);

if (res.recode == 200) {

this.getUserInfo();

this.dialogVisible = false;

this.$message.success("修改成功");

} else {

this.$message.warning("操作失败，请稍后重试");

}

} else {

this.$message.warning("请检查你的信息是否填写完整");

}

});

}

};

</script>

/deep/.el-card {

margin: 20px 0 0 20px;

}

.cropper-content {

min-width: 540px;

display: flex;

.cropper {

width: 260px;

height: 260px;

}

.show-preview {

flex: 1;

-webkit-flex: 1;

display: flex;

display: -webkit-flex;

justify-content: center;

-webkit-justify-content: center;

.preview {

overflow: hidden;

border-radius: 50%;

border: 1px solid #cccccc;

background: #cccccc;

margin-left: 40px;

}

.cropper-content .show-preview .preview {

margin-left: 0;

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

-khtml-user-select: none;

user-select: none;

}

.el-dialog {

width: 700px !important;

height: auto;

}

.show-preview {

display: flex;

justify-content: center;

}

.preview {

border-radius: 50%;

overflow: hidden;

border: 1px solid #cccccc;

background: #cccccc;

width: 150px !important;

height: 150px !important;

margin-left: 50px;

margin-top: 50px;

}

.upload-img {

width: 100px;

height: 30px;

border: 1px solid #f08512;

margin-bottom: 5px;

line-height: 30px;

text-align: center;

cursor: pointer;

}

.footerBtn {

display: flex;

justify-content: center;

margin-top: 15px;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

/deep/.el-dialog__footer {

text-align: center;

}

.btn {

background-color: skyblue;

position: absolute;

right: 10px;

bottom: 10px;

}

.middle {

display: flex;

flex-direction: column;

justify-content: space-around;

margin-left: 150px;

.accountNumber {

display: flex;

margin-right: 30px;

}

.phone {

display: flex;

margin-right: 30px;

}

.right {

display: flex;

flex-direction: column;

justify-content: space-around;

.accountNumber {

display: flex;

margin-right: 30px;

}

.phone {

display: flex;

margin-right: 30px;

}

/deep/.el-card__body {

display: flex;

align-items: center;

position: relative;

}

.pic {

position: relative;

margin-left: 32px;

height: 116px;

width: 116px;

position: relative;

text-align: center;

border-radius: 50%;

overflow: hidden;

.xiugai {

width: 100%;

height: 31px;

opacity: 0.75;

background: rgb(24, 24, 24);

position: absolute;

bottom: 0px;

font-size: 12px;

color: rgb(255, 255, 255);

text-align: center;

line-height: 31px;

cursor: pointer;

}

.el-image {

width: 100%;

height: 100%;

border-radius: 50%;

}

</style>

vue 头像上传裁剪相关推荐

vue 头像上传裁剪功能
1,第一步安装vue-cropper cnpm install vue-cropper 2,在main.js引用 import VueCropper from 'vue-cropper'; Vue.u ...
vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件，用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图一.第一步引入image-cropper,放在dist文 ...
调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
SpringBoot + Vue 头像上传案例
头像上传前言后台系统一般会有用户个人信息的模块,为了增强用户的体验度,系统会开放自定义头像的功能,让用户可以上传自定义图片替代默认的系统头像.本文将通过SpringBoot+Vue来具体实现. 前 ...
android 华为裁剪全图,华为手机头像上传裁剪操作报错
华为手机头像上传操作, 裁剪点存储--进入裁剪后--点确定, 就直接报错退出程序了,其他机型测都是成功的,求大神指教报错代码 @Override protected void onActivityR ...
Vue头像上传，裁剪
安装:npm install vue-image-crop-upload --save (作为开发依赖安装) 使用:import myUpload from 'vue-image-crop-uploa ...
Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口
场景前后端分离的项目,前端修改头像时,需要对头像进行裁剪并且能实时预览,然后上传到SpringBoot后台. 实现效果如下注: 博客: https://blog.csdn.net/badao_li ...
微服务电商实战(十一)搭建vue项目对接注册登陆接口，解决跨域问题，使用七牛云实现头像上传
一.简介 node.js版本:v12.16.3 node.js下载 vue官网教程 iview介绍上传头像接口,图片存储在七牛云中,注册并实名认证之后可以免费使用以下会描述使用vue搭建项目框架的 ...
flash 图片剪切 php,flash + php头像上传预览裁剪组件1.8发_php
安装及部署: 1. 上传到 apache,iis,Tomcat 服务器,通过域名访问 index.html v1.8 1.优化摄像头拍照不清晰(目前支持高清) v1.7 http://www.gaod ...

vue 头像上传裁剪

vue 头像上传裁剪相关推荐

最新文章

热门文章

vue 头像 上传 裁剪

vue 头像 上传 裁剪相关推荐

最新文章

热门文章

vue 头像上传裁剪

vue 头像上传裁剪相关推荐