| | |
|---|
| | | <el-row> |
|---|
| | | <el-col :xs="24" :md="12" :style="{ height: '350px' }"> |
|---|
| | | <vue-cropper |
|---|
| | | v-if="visible" |
|---|
| | | ref="cropper" |
|---|
| | | :img="options.img" |
|---|
| | | :info="true" |
|---|
| | | :autoCrop="options.autoCrop" |
|---|
| | | :autoCropWidth="options.autoCropWidth" |
|---|
| | | :autoCropHeight="options.autoCropHeight" |
|---|
| | | :fixedBox="options.fixedBox" |
|---|
| | | :outputType="options.outputType" |
|---|
| | | @realTime="realTime" |
|---|
| | | v-if="visible" |
|---|
| | | :auto-crop="options.autoCrop" |
|---|
| | | :auto-crop-width="options.autoCropWidth" |
|---|
| | | :auto-crop-height="options.autoCropHeight" |
|---|
| | | :fixed-box="options.fixedBox" |
|---|
| | | :output-type="options.outputType" |
|---|
| | | @real-time="realTime" |
|---|
| | | /> |
|---|
| | | </el-col> |
|---|
| | | <el-col :xs="24" :md="12" :style="{ height: '350px' }"> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import "vue-cropper/dist/index.css"; |
|---|
| | | import { VueCropper } from "vue-cropper"; |
|---|
| | | import { uploadAvatar } from "@/api/system/user"; |
|---|
| | | import useUserStore from "@/store/modules/user"; |
|---|
| | | import 'vue-cropper/dist/index.css'; |
|---|
| | | import { VueCropper } from 'vue-cropper'; |
|---|
| | | import { uploadAvatar } from '@/api/system/user'; |
|---|
| | | import useUserStore from '@/store/modules/user'; |
|---|
| | | |
|---|
| | | interface Options { |
|---|
| | | img: string | any; // 裁剪图片的地址 |
|---|
| | |
|---|
| | | visible: boolean; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | const userStore = useUserStore(); |
|---|
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
|---|
| | | |
|---|
| | | const open = ref(false); |
|---|
| | | const visible = ref(false); |
|---|
| | | const title = ref("修改头像"); |
|---|
| | | const title = ref('修改头像'); |
|---|
| | | |
|---|
| | | const cropper = ref<any>({}); |
|---|
| | | //图片裁剪数据 |
|---|
| | |
|---|
| | | autoCropWidth: 200, |
|---|
| | | autoCropHeight: 200, |
|---|
| | | fixedBox: true, |
|---|
| | | outputType: "png", |
|---|
| | | fileName: "", |
|---|
| | | outputType: 'png', |
|---|
| | | fileName: '', |
|---|
| | | previews: {}, |
|---|
| | | visible: false |
|---|
| | | }); |
|---|
| | |
|---|
| | | visible.value = true; |
|---|
| | | }; |
|---|
| | | /** 覆盖默认上传行为 */ |
|---|
| | | const requestUpload = (): any => { |
|---|
| | | }; |
|---|
| | | const requestUpload = (): any => {}; |
|---|
| | | /** 向左旋转 */ |
|---|
| | | const rotateLeft = () => { |
|---|
| | | cropper.value.rotateLeft(); |
|---|
| | |
|---|
| | | }; |
|---|
| | | /** 上传预处理 */ |
|---|
| | | const beforeUpload = (file: any) => { |
|---|
| | | if (file.type.indexOf("image/") == -1) { |
|---|
| | | proxy?.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"); |
|---|
| | | if (file.type.indexOf('image/') == -1) { |
|---|
| | | proxy?.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。'); |
|---|
| | | } else { |
|---|
| | | const reader = new FileReader(); |
|---|
| | | reader.readAsDataURL(file); |
|---|
| | |
|---|
| | | const uploadImg = async () => { |
|---|
| | | cropper.value.getCropBlob(async (data: any) => { |
|---|
| | | let formData = new FormData(); |
|---|
| | | formData.append("avatarfile", data, options.fileName); |
|---|
| | | formData.append('avatarfile', data, options.fileName); |
|---|
| | | const res = await uploadAvatar(formData); |
|---|
| | | open.value = false; |
|---|
| | | options.img = res.data.imgUrl; |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-info-head:hover:after { |
|---|
| | | content: "+"; |
|---|
| | | content: '+'; |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
