vue 头像 上传 裁剪
<template>
? <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">
? ? ? <div class="left">
? ? ? ? <div class="pic">
? ? ? ? ? <el-image :src="gerenuserInfos.headUrl"></el-image>
? ? ? ? ? <div class="xiugai" @click="modify">修改</div>
? ? ? ? </div>
? ? ? </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="郵箱：">
? ? ? {{ gerenuserInfos.email }}
? ? </el-descriptions-item>
</el-descriptions>
? ? ? <!-- <div class="middle">
? ? ? ? <div class="accountNumber">
? ? ? ? ? 用戶姓名：
? ? ? ? ? <div style="font-weight:bold;margin-left:26px">{{ gerenuserInfos.userName }}</div>
? ? ? ? </div>
? ? ? ? <div class="phone">
? ? ? ? ? 手機號：
? ? ? ? ? <div style="font-weight:bold;margin-left:40px">{{ gerenuserInfos.mobilPhone }}</div>
? ? ? ? </div>
? ? ? ? <div class="accountNumber">
? ? ? ? ? 身份證：
? ? ? ? ? <div style="font-weight:bold;margin-left:40px">{{ gerenuserInfos.cardNo }}</div>
? ? ? ? </div>
? ? ? ? <div class="phone">
? ? ? ? ? 郵箱：
? ? ? ? ? <div style="font-weight:bold;margin-left:56px">{{ gerenuserInfos.email }}</div>
? ? ? ? </div>
? ? ? </div> -->
? ? ? <!-- <div class="right">
? ? ? ? <div class="accountNumber">
? ? ? ? ? 身份證：
? ? ? ? ? <div >{{ gerenuserInfos.cardNo }}</div>
? ? ? ? </div>
? ? ? ? <div class="phone">
? ? ? ? ? 郵箱：
? ? ? ? ? <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>
? ? ? <span slot="footer" class="dialog-footer">
? ? ? ? <el-button @click="btnCancel">取 消</el-button>
? ? ? ? <el-button type="primary" @click="btnOk">確 定</el-button>
? ? ? </span>
? ? </el-dialog>
? ? <!-- 頭像編輯 -->
? ? <el-dialog title="編輯頭像" :visible.sync="imgDialog">
? ? ? <div style="min-width: 540px;width:600px;">
? ? ? ? <div class="eleme">
? ? ? ? ? <el-upload
? ? ? ? ? ? class="upload-demo"
? ? ? ? ? ? ref="upload"
? ? ? ? ? ? action="#"
? ? ? ? ? ? :before-upload="beforeUpload"
? ? ? ? ? ? :on-preview="handlePreview"
? ? ? ? ? ? :on-remove="handleRemove"
? ? ? ? ? ? :auto-upload="true"
? ? ? ?
? ? ? ? ? ? :show-file-list="false"
? ? ? ? ? >
? ? ? ? ? <!-- ? ? :on-success="SuccessFlie" -->
? ? ? ? ? ? <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></div>
? ? ? ? <div class="cropper">
? ? ? ? ? <div
? ? ? ? ? ? class="cropper-content"
? ? ? ? ? ? style="margin-top:30px;margin-left:30px;"
? ? ? ? ? >
? ? ? ? ? ? <div class="cropper">
? ? ? ? ? ? ? <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>
? ? ? ? </div>
? ? ? </div>
? ? </el-dialog>
? </div>
</template>
<script>
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>
<style lang="less" scoped>
/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 头像 上传 裁剪的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [Cookie]解决Cookie跨域访问
- 下一篇： vue移动端下拉刷新、上拉加载