Skip to content

B
basic-vue-admin
提交 8e410fc6 作者: Vben
操作

feat: add CropperAvatar component

上级 de12babd
正在显示 包含 550 行增加 和 121 行删除
CHANGELOG.zh_CN.md
## Wip
### ✨ Features
- `Cropper` 头像裁剪新增圆形裁剪功能
- 新增头像上传组件
## 2.4.2(2021-06-10) ## 2.4.2(2021-06-10)
### ✨ Refactor ### ✨ Refactor
......
package.json
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
"@logicflow/extension": "^0.4.13", "@logicflow/extension": "^0.4.13",
"@vueuse/core": "^5.0.2", "@vueuse/core": "^5.0.2",
"@zxcvbn-ts/core": "^0.3.0", "@zxcvbn-ts/core": "^0.3.0",
"ant-design-vue": "2.1.2", "ant-design-vue": "2.1.6",
"axios": "^0.21.1", "axios": "^0.21.1",
"codemirror": "^5.61.1", "codemirror": "^5.61.1",
"cropperjs": "^1.5.11", "cropperjs": "^1.5.11",
......
src/components/Application/src/search/AppSearchModal.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div :class="getClass" @click.stop v-if="visible"> <div :class="getClass" @click.stop v-if="visible">
<div :class="`${prefixCls}-content`" v-click-outside="handleClose"> <div :class="`${prefixCls}-content`" v-click-outside="handleClose">
<div :class="`${prefixCls}-input__wrapper`"> <div :class="`${prefixCls}-input__wrapper`">
<Input <a-input
:class="`${prefixCls}-input`" :class="`${prefixCls}-input`"
:placeholder="t('common.searchText')" :placeholder="t('common.searchText')"
ref="inputRef" ref="inputRef"
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<template #prefix> <template #prefix>
<SearchOutlined /> <SearchOutlined />
</template> </template>
</Input> </a-input>
<span :class="`${prefixCls}-cancel`" @click="handleClose"> <span :class="`${prefixCls}-cancel`" @click="handleClose">
{{ t('common.cancelText') }} {{ t('common.cancelText') }}
</span> </span>
...@@ -59,7 +59,6 @@ ...@@ -59,7 +59,6 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, computed, unref, ref, watch, nextTick } from 'vue'; import { defineComponent, computed, unref, ref, watch, nextTick } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue'; import { SearchOutlined } from '@ant-design/icons-vue';
import { Input } from 'ant-design-vue';
import AppSearchFooter from './AppSearchFooter.vue'; import AppSearchFooter from './AppSearchFooter.vue';
import Icon from '/@/components/Icon'; import Icon from '/@/components/Icon';
import clickOutside from '/@/directives/clickOutside'; import clickOutside from '/@/directives/clickOutside';
...@@ -75,7 +74,7 @@ ...@@ -75,7 +74,7 @@
export default defineComponent({ export default defineComponent({
name: 'AppSearchModal', name: 'AppSearchModal',
components: { Icon, SearchOutlined, AppSearchFooter, Input }, components: { Icon, SearchOutlined, AppSearchFooter },
directives: { directives: {
clickOutside, clickOutside,
}, },
......
src/components/CountDown/src/CountdownInput.vue
<template> <template>
<AInput v-bind="$attrs" :class="prefixCls" :size="size" :value="state"> <a-input v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
<template #addonAfter> <template #addonAfter>
<CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" /> <CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" />
</template> </template>
</AInput> </a-input>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from 'vue'; import { defineComponent, PropType } from 'vue';
import { Input } from 'ant-design-vue';
import CountButton from './CountButton.vue'; import CountButton from './CountButton.vue';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { useRuleFormItem } from '/@/hooks/component/useFormItem'; import { useRuleFormItem } from '/@/hooks/component/useFormItem';
...@@ -24,7 +23,7 @@ ...@@ -24,7 +23,7 @@
export default defineComponent({ export default defineComponent({
name: 'CountDownInput', name: 'CountDownInput',
components: { [Input.name]: Input, CountButton }, components: { CountButton },
inheritAttrs: false, inheritAttrs: false,
props, props,
setup(props) { setup(props) {
......
src/components/Cropper/index.ts
import type Cropper from 'cropperjs'; import { withInstall } from '/@/utils';
import cropperImage from './src/Cropper.vue';
import avatarCropper from './src/CropperAvatar.vue';
export type { Cropper }; export * from './src/typing';
export { default as CropperImage } from './src/Cropper.vue'; export const CropperImage = withInstall(cropperImage);
export const CropperAvatar = withInstall(avatarCropper);
src/components/Cropper/src/AvatarCropper.vue deleted 100644 → 0
<template>
<div :class="$attrs.class" :style="$attrs.style"> </div>
</template>
<script lang="ts">
// TODO
import { defineComponent } from 'vue';
export default defineComponent({
name: 'AvatarCropper',
props: {},
setup() {
return {};
},
});
</script>
src/components/Cropper/src/CopperModal.vue 0 → 100644
<template>
<BasicModal
v-bind="$attrs"
@register="register"
:title="t('component.cropper.modalTitle')"
width="800px"
:canFullscreen="false"
@ok="handleOk"
:okText="t('component.cropper.okText')"
>
<div :class="prefixCls">
<div :class="`${prefixCls}-left`">
<div :class="`${prefixCls}-cropper`">
<CropperImage
v-if="src"
:src="src"
height="300px"
:circled="circled"
@cropend="handleCropend"
@ready="handleReady"
/>
</div>
<div :class="`${prefixCls}-toolbar`">
<Upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload">
<a-button size="small" preIcon="ant-design:upload-outlined" type="primary" />
</Upload>
<Space>
<a-button
type="primary"
preIcon="ant-design:reload-outlined"
size="small"
@click="handlerToolbar('reset')"
/>
<a-button
type="primary"
preIcon="ant-design:rotate-left-outlined"
size="small"
@click="handlerToolbar('rotate', -45)"
/>
<a-button
type="primary"
preIcon="ant-design:rotate-right-outlined"
size="small"
@click="handlerToolbar('rotate', 45)"
/>
<a-button
type="primary"
preIcon="vaadin:arrows-long-h"
size="small"
@click="handlerToolbar('scaleX')"
/>
<a-button
type="primary"
preIcon="vaadin:arrows-long-v"
size="small"
@click="handlerToolbar('scaleY')"
/>
<a-button
type="primary"
preIcon="ant-design:zoom-in-outlined"
size="small"
@click="handlerToolbar('zoom', 0.1)"
/>
<a-button
type="primary"
preIcon="ant-design:zoom-out-outlined"
size="small"
@click="handlerToolbar('zoom', -0.1)"
/>
</Space>
</div>
</div>
<div :class="`${prefixCls}-right`">
<div :class="`${prefixCls}-preview`">
<img :src="previewSource" v-if="previewSource" />
</div>
<template v-if="previewSource">
<div :class="`${prefixCls}-group`">
<Avatar :src="previewSource" size="large" />
<Avatar :src="previewSource" :size="48" />
<Avatar :src="previewSource" :size="64" />
<Avatar :src="previewSource" :size="80" />
</div>
</template>
</div>
</div>
</BasicModal>
</template>
<script lang="ts">
import type { CropendResult, Cropper } from './typing';
import { defineComponent, ref } from 'vue';
import CropperImage from './Cropper.vue';
import { Space, Upload, Avatar } from 'ant-design-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { dataURLtoBlob } from '/@/utils/file/base64Conver';
import { isFunction } from '/@/utils/is';
import { useI18n } from '/@/hooks/web/useI18n';
const props = {
circled: { type: Boolean, default: true },
uploadApi: {
type: Function as PropType<({ file: Blob, name: stirng, filename: string }) => Promise<any>>,
},
};
export default defineComponent({
name: 'CropperAvatar',
components: { BasicModal, Space, CropperImage, Upload, Avatar },
props,
emits: ['uploadSuccess', 'register'],
setup(props, { emit }) {
let filename = '';
const src = ref('');
const previewSource = ref('');
const cropper = ref<Cropper>();
let scaleX = 1;
let scaleY = 1;
const { prefixCls } = useDesign('cropper-am');
const [register, { closeModal, setModalProps }] = useModalInner();
const { t } = useI18n();
// Block upload
function handleBeforeUpload(file: File) {
const reader = new FileReader();
reader.readAsDataURL(file);
src.value = '';
previewSource.value = '';
reader.onload = function (e) {
src.value = (e.target?.result as string) ?? '';
filename = file.name;
};
return false;
}
function handleCropend({ imgBase64 }: CropendResult) {
previewSource.value = imgBase64;
}
function handleReady(cropperInstance: Cropper) {
cropper.value = cropperInstance;
}
function handlerToolbar(event: string, arg?: number) {
if (event === 'scaleX') {
scaleX = arg = scaleX === -1 ? 1 : -1;
}
if (event === 'scaleY') {
scaleY = arg = scaleY === -1 ? 1 : -1;
}
cropper?.value?.[event]?.(arg);
}
async function handleOk() {
const uploadApi = props.uploadApi;
if (uploadApi && isFunction(uploadApi)) {
const blob = dataURLtoBlob(previewSource.value);
try {
setModalProps({ confirmLoading: true });
const result = await uploadApi({ name: 'file', file: blob, filename });
emit('uploadSuccess', { source: previewSource.value, data: result.data });
closeModal();
} finally {
setModalProps({ confirmLoading: false });
}
}
}
return {
t,
prefixCls,
src,
register,
previewSource,
handleBeforeUpload,
handleCropend,
handleReady,
handlerToolbar,
handleOk,
};
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-cropper-am';
.@{prefix-cls} {
display: flex;
&-left,
&-right {
height: 340px;
}
&-left {
width: 55%;
}
&-right {
width: 45%;
}
&-cropper {
height: 300px;
background: #eee;
background-image: linear-gradient(
45deg,
rgba(0, 0, 0, 0.25) 25%,
transparent 0,
transparent 75%,
rgba(0, 0, 0, 0.25) 0
),
linear-gradient(
45deg,
rgba(0, 0, 0, 0.25) 25%,
transparent 0,
transparent 75%,
rgba(0, 0, 0, 0.25) 0
);
background-position: 0 0, 12px 12px;
background-size: 24px 24px;
}
&-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
&-preview {
width: 220px;
height: 220px;
margin: 0 auto;
overflow: hidden;
border: 1px solid @border-color-base;
border-radius: 50%;
img {
width: 100%;
height: 100%;
}
}
&-group {
display: flex;
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid @border-color-base;
justify-content: space-around;
align-items: center;
}
}
</style>
src/components/Cropper/src/Cropper.vue
<template> <template>
<div :class="$attrs.class" :style="getWrapperStyle"> <div :class="getClass" :style="getWrapperStyle">
<img <img
v-show="isReady" v-show="isReady"
ref="imgElRef" ref="imgElRef"
...@@ -12,16 +12,16 @@ ...@@ -12,16 +12,16 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import type { CSSProperties } from 'vue'; import type { CSSProperties } from 'vue';
import { defineComponent, onMounted, ref, unref, computed } from 'vue'; import { defineComponent, onMounted, ref, unref, computed } from 'vue';
import Cropper from 'cropperjs'; import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css'; import 'cropperjs/dist/cropper.css';
import { useDesign } from '/@/hooks/web/useDesign';
import { useThrottleFn } from '@vueuse/shared';
type Options = Cropper.Options; type Options = Cropper.Options;
const defaultOptions: Options = { const defaultOptions: Options = {
aspectRatio: 16 / 9, aspectRatio: 1,
zoomable: true, zoomable: true,
zoomOnTouch: true, zoomOnTouch: true,
zoomOnWheel: true, zoomOnWheel: true,
...@@ -43,40 +43,33 @@ ...@@ -43,40 +43,33 @@
rotatable: true, rotatable: true,
}; };
export default defineComponent({ const props = {
name: 'CropperImage', src: { type: String, required: true },
props: { alt: { type: String },
src: { circled: { type: Boolean, default: false },
type: String,
required: true, realTimePreview: { type: Boolean, default: true },
}, height: { type: [String, Number], default: '360px' },
alt: { crossorigin: {
type: String, type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
}, default: undefined,
height: {
type: [String, Number],
default: '360px',
},
crossorigin: {
type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
default: undefined,
},
imageStyle: {
type: Object as PropType<CSSProperties>,
default: () => ({}),
},
options: {
type: Object as PropType<Options>,
default: () => ({}),
},
}, },
emits: ['cropperedInfo'], imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
setup(props, ctx) { options: { type: Object as PropType<Options>, default: () => ({}) },
const imgElRef = ref<ElRef<HTMLImageElement>>(null); };
const cropper: any = ref<Nullable<Cropper>>(null);
export default defineComponent({
name: 'CropperImage',
props,
emits: ['cropend', 'ready', 'cropendError'],
setup(props, { attrs, emit }) {
const imgElRef = ref<ElRef<HTMLImageElement>>();
const cropper = ref<Nullable<Cropper>>();
const isReady = ref(false); const isReady = ref(false);
const { prefixCls } = useDesign('cropper-image');
const throttleRealTimeCroppered = useThrottleFn(realTimeCroppered, 80);
const getImageStyle = computed((): CSSProperties => { const getImageStyle = computed((): CSSProperties => {
return { return {
height: props.height, height: props.height,
...@@ -85,11 +78,22 @@ ...@@ -85,11 +78,22 @@
}; };
}); });
const getClass = computed(() => {
return [
prefixCls,
attrs.class,
{
[`${prefixCls}--circled`]: props.circled,
},
];
});
const getWrapperStyle = computed((): CSSProperties => { const getWrapperStyle = computed((): CSSProperties => {
const { height } = props; return { height: `${props.height}`.replace(/px/, '') + 'px' };
return { height: `${height}`.replace(/px/, '') + 'px' };
}); });
onMounted(init);
async function init() { async function init() {
const imgEl = unref(imgElRef); const imgEl = unref(imgElRef);
if (!imgEl) { if (!imgEl) {
...@@ -99,29 +103,83 @@ ...@@ -99,29 +103,83 @@
...defaultOptions, ...defaultOptions,
ready: () => { ready: () => {
isReady.value = true; isReady.value = true;
realTimeCroppered();
emit('ready', cropper.value);
},
crop() {
throttleRealTimeCroppered();
},
zoom() {
throttleRealTimeCroppered();
},
cropmove() {
throttleRealTimeCroppered();
}, },
...props.options, ...props.options,
}); });
} }
// Real-time display preview
function realTimeCroppered() {
props.realTimePreview && croppered();
}
// event: return base64 and width and height information after cropping // event: return base64 and width and height information after cropping
const croppered = (): void => { function croppered() {
if (!cropper.value) {
return;
}
let imgInfo = cropper.value.getData(); let imgInfo = cropper.value.getData();
cropper.value.getCroppedCanvas().toBlob((blob) => { const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas();
canvas.toBlob((blob) => {
if (!blob) {
return;
}
let fileReader: FileReader = new FileReader(); let fileReader: FileReader = new FileReader();
fileReader.readAsDataURL(blob);
fileReader.onloadend = (e) => { fileReader.onloadend = (e) => {
ctx.emit('cropperedInfo', { emit('cropend', {
imgBase64: e.target?.result ?? '', imgBase64: e.target?.result ?? '',
imgInfo, imgInfo,
}); });
}; };
fileReader.readAsDataURL(blob); fileReader.onerror = () => {
}, 'image/jpeg'); emit('cropendError');
}; };
}, 'image/png');
}
onMounted(init); // Get a circular picture canvas
function getRoundedCanvas() {
const sourceCanvas = cropper.value!.getCroppedCanvas();
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d')!;
const width = sourceCanvas.width;
const height = sourceCanvas.height;
canvas.width = width;
canvas.height = height;
context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
context.fill();
return canvas;
}
return { imgElRef, getWrapperStyle, getImageStyle, isReady, croppered }; return { getClass, imgElRef, getWrapperStyle, getImageStyle, isReady, croppered };
}, },
}); });
</script> </script>
<style lang="less">
@prefix-cls: ~'@{namespace}-cropper-image';
.@{prefix-cls} {
&--circled {
.cropper-view-box,
.cropper-face {
border-radius: 50%;
}
}
}
</style>
src/components/Cropper/src/CropperAvatar.vue 0 → 100644
<template>
<div :class="getClass" :style="getStyle">
<div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal">
<img :src="sourceValue" v-if="sourceValue" alt="avatar" />
</div>
<a-button :class="`${prefixCls}-upload-btn`" @click="openModal">
{{ t('component.cropper.selectImage') }}
</a-button>
<CopperModal @register="register" @uploadSuccess="handleUploadSuccess" :uploadApi="uploadApi" />
</div>
</template>
<script lang="ts">
import { defineComponent, computed, CSSProperties, unref, ref } from 'vue';
import CopperModal from './CopperModal.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
const props = {
src: { type: String, required: true },
width: { type: [String, Number], default: '200px' },
uploadApi: { type: Function as PropType<({ file: Blob, name: stirng }) => Promise<void>> },
};
export default defineComponent({
name: 'CropperAvatar',
components: { CopperModal },
props,
setup(props) {
const sourceValue = ref('');
const { prefixCls } = useDesign('cropper-avatar');
const [register, { openModal }] = useModal();
const { createMessage } = useMessage();
const { t } = useI18n();
const getClass = computed(() => [prefixCls]);
const getWidth = computed(() => `${props.width}`.replace(/px/, '') + 'px');
const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
const getImageWrapperStyle = computed(
(): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) })
);
function handleUploadSuccess({ source }) {
sourceValue.value = source;
createMessage.success(t('component.cropper.uploadSuccess'));
}
return {
t,
prefixCls,
register,
openModal,
sourceValue,
getClass,
getImageWrapperStyle,
getStyle,
handleUploadSuccess,
};
},
});
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-cropper-avatar';
.@{prefix-cls} {
display: inline-block;
text-align: center;
&-image-wrapper {
overflow: hidden;
cursor: pointer;
background: @component-background;
border: 1px solid @border-color-base;
border-radius: 50%;
img {
width: 100%;
}
}
&-upload-btn {
margin: 10px auto;
}
}
</style>
src/components/Cropper/src/typing.ts 0 → 100644
import type Cropper from 'cropperjs';
export interface CropendResult {
imgBase64: string;
imgInfo: Cropper.Data;
}
export type { Cropper };
src/locales/lang/en/component.ts
...@@ -8,6 +8,12 @@ export default { ...@@ -8,6 +8,12 @@ export default {
normalText: 'Get SMS code', normalText: 'Get SMS code',
sendText: 'Reacquire in {0}s', sendText: 'Reacquire in {0}s',
}, },
cropper: {
selectImage: 'Select Image',
uploadSuccess: 'Uploaded success!',
modalTitle: 'Avatar upload',
okText: 'Confirm and upload',
},
drawer: { drawer: {
loadingText: 'Loading...', loadingText: 'Loading...',
cancelText: 'Close', cancelText: 'Close',
......
src/locales/lang/zh_CN/component.ts
...@@ -8,6 +8,12 @@ export default { ...@@ -8,6 +8,12 @@ export default {
normalText: '获取验证码', normalText: '获取验证码',
sendText: '{0}秒后重新获取', sendText: '{0}秒后重新获取',
}, },
cropper: {
selectImage: '选择图片',
uploadSuccess: '上传成功',
modalTitle: '头像上传',
okText: '确认并上传',
},
drawer: { drawer: {
loadingText: '加载中...', loadingText: '加载中...',
cancelText: '关闭', cancelText: '关闭',
......
src/router/menus/modules/demo/comp.ts
...@@ -6,6 +6,7 @@ const menu: MenuModule = { ...@@ -6,6 +6,7 @@ const menu: MenuModule = {
menu: { menu: {
name: t('routes.demo.comp.comp'), name: t('routes.demo.comp.comp'),
path: '/comp', path: '/comp',
tag: { dot: true },
children: [ children: [
{ {
path: 'basic', path: 'basic',
...@@ -124,6 +125,9 @@ const menu: MenuModule = { ...@@ -124,6 +125,9 @@ const menu: MenuModule = {
{ {
path: 'cropper', path: 'cropper',
name: t('routes.demo.comp.cropperImage'), name: t('routes.demo.comp.cropperImage'),
tag: {
content: 'new',
},
}, },
{ {
path: 'countTo', path: 'countTo',
...@@ -192,9 +196,6 @@ const menu: MenuModule = { ...@@ -192,9 +196,6 @@ const menu: MenuModule = {
{ {
path: 'json', path: 'json',
name: t('routes.demo.editor.jsonEditor'), name: t('routes.demo.editor.jsonEditor'),
tag: {
content: 'new',
},
}, },
{ {
path: 'markdown', path: 'markdown',
......
src/router/menus/modules/demo/feat.ts
...@@ -6,9 +6,6 @@ const menu: MenuModule = { ...@@ -6,9 +6,6 @@ const menu: MenuModule = {
menu: { menu: {
name: t('routes.demo.feat.feat'), name: t('routes.demo.feat.feat'),
path: '/feat', path: '/feat',
tag: {
dot: true,
},
children: [ children: [
{ {
path: 'icon', path: 'icon',
...@@ -21,9 +18,6 @@ const menu: MenuModule = { ...@@ -21,9 +18,6 @@ const menu: MenuModule = {
{ {
name: t('routes.demo.feat.sessionTimeout'), name: t('routes.demo.feat.sessionTimeout'),
path: 'session-timeout', path: 'session-timeout',
tag: {
content: 'new',
},
}, },
{ {
path: 'tabs', path: 'tabs',
......
src/views/demo/comp/cropper/index.vue
<template> <template>
<PageWrapper title="图片裁剪示例" contentBackground> <PageWrapper title="图片裁剪示例" content="需要开启测试接口服务才能进行上传测试！">
<div class="container"> <CollapseContainer title="头像裁剪">
<div class="cropper-container"> <CropperAvatar :src="cropperImg" :uploadApi="uploadApi" />
<CropperImage </CollapseContainer>
ref="refCropper"
src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" <CollapseContainer title="矩形裁剪" class="my-4">
@cropperedInfo="cropperedInfo" <div class="container p-4">
style="width: 40vw" <div class="cropper-container mr-10">
/> <CropperImage ref="refCropper" :src="img" @cropend="handleCropend" style="width: 40vw" />
</div>
<img :src="cropperImg" class="croppered" v-if="cropperImg" />
</div>
<p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
</CollapseContainer>
<CollapseContainer title="圆形裁剪">
<div class="container p-4">
<div class="cropper-container mr-10">
<CropperImage
ref="refCropper"
:src="img"
@cropend="handleCircleCropend"
style="width: 40vw"
circled
/>
</div>
<img :src="circleImg" class="croppered" v-if="circleImg" />
</div> </div>
<a-button type="primary" @click="onCropper"> 裁剪 </a-button> <p v-if="circleImg">裁剪后图片信息：{{ circleInfo }}</p>
<img :src="cropperImg" class="croppered" v-if="cropperImg" /> </CollapseContainer>
</div>
<p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, unref } from 'vue'; import { defineComponent, ref } from 'vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { CropperImage } from '/@/components/Cropper'; import { CollapseContainer } from '/@/components/Container/index';
import { CropperImage, CropperAvatar } from '/@/components/Cropper';
import { uploadApi } from '/@/api/sys/upload';
import img from '/@/assets/images/header.jpg'; import img from '/@/assets/images/header.jpg';
import { templateRef } from '@vueuse/core';
export default defineComponent({ export default defineComponent({
components: { components: {
PageWrapper, PageWrapper,
CropperImage, CropperImage,
CollapseContainer,
CropperAvatar,
}, },
setup() { setup() {
let info = ref(''); const info = ref('');
let cropperImg = ref(''); const cropperImg = ref('');
const refCropper = templateRef<HTMLElement | null>('refCropper', null); const circleInfo = ref('');
const circleImg = ref('');
const onCropper = (): void => { function handleCropend({ imgBase64, imgInfo }) {
unref(refCropper).croppered();
};
function cropperedInfo({ imgBase64, imgInfo }) {
info.value = imgInfo; info.value = imgInfo;
cropperImg.value = imgBase64; cropperImg.value = imgBase64;
} }
function handleCircleCropend({ imgBase64, imgInfo }) {
circleInfo.value = imgInfo;
circleImg.value = imgBase64;
}
return { return {
img, img,
info, info,
circleInfo,
cropperImg, cropperImg,
onCropper, circleImg,
cropperedInfo, handleCropend,
handleCircleCropend,
uploadApi,
}; };
}, },
}); });
......
src/views/demo/comp/upload/index.vue
...@@ -21,7 +21,6 @@ ...@@ -21,7 +21,6 @@
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { Alert } from 'ant-design-vue'; import { Alert } from 'ant-design-vue';
import { uploadApi } from '/@/api/sys/upload'; import { uploadApi } from '/@/api/sys/upload';
const schemas: FormSchema[] = [ const schemas: FormSchema[] = [
......
src/views/demo/feat/copy/index.vue
...@@ -14,11 +14,10 @@ ...@@ -14,11 +14,10 @@
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { Input } from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
name: 'Copy', name: 'Copy',
components: { CollapseContainer, PageWrapper, [Input.name]: Input }, components: { CollapseContainer, PageWrapper },
setup() { setup() {
const valueRef = ref(''); const valueRef = ref('');
const { createMessage } = useMessage(); const { createMessage } = useMessage();
......
test/server/service/FileService.ts
...@@ -10,8 +10,6 @@ export default class UserService { ...@@ -10,8 +10,6 @@ export default class UserService {
let fileReader, fileResource, writeStream; let fileReader, fileResource, writeStream;
const fileFunc = function (file) { const fileFunc = function (file) {
console.log(file);
fileReader = fs.createReadStream(file.path); fileReader = fs.createReadStream(file.path);
fileResource = filePath + `/${file.name}`; fileResource = filePath + `/${file.name}`;
console.log(fileResource); console.log(fileResource);
......
yarn.lock
...@@ -2188,10 +2188,10 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: ...@@ -2188,10 +2188,10 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
dependencies: dependencies:
color-convert "^2.0.1" color-convert "^2.0.1"
ant-design-vue@2.1.2: ant-design-vue@2.1.6:
version "2.1.2" version "2.1.6"
resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.1.2.tgz#2065d7e63199c0c584919458af57b6a0b597f677" resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.1.6.tgz#c51cdc858e1b1b8b569f5435eb487f53a3f1745e"
integrity sha512-gDG0wauGVt4LE63behrJaIcq4BB+dgs+dpj9jz17IgKr2MPYSEeKetU/x9Kk8d58cGonz4Ulncg7fBZJ7EljsQ== integrity sha512-qICxb6Y4f7QuSuh/jbLhZA9SkUBnP9xYfy/E6yD7+1fg04aAzmRK8oLv8ETuGTrROVdSVeic9v/NS2BXEuuARg==
dependencies: dependencies:
"@ant-design-vue/use" "^0.0.1-0" "@ant-design-vue/use" "^0.0.1-0"
"@ant-design/icons-vue" "^6.0.0" "@ant-design/icons-vue" "^6.0.0"
...@@ -2201,7 +2201,7 @@ ant-design-vue@2.1.2: ...@@ -2201,7 +2201,7 @@ ant-design-vue@2.1.2:
async-validator "^3.3.0" async-validator "^3.3.0"
dom-align "^1.10.4" dom-align "^1.10.4"
dom-scroll-into-view "^2.0.0" dom-scroll-into-view "^2.0.0"
is-mobile "^2.2.1" lodash "^4.17.21"
lodash-es "^4.17.15" lodash-es "^4.17.15"
moment "^2.27.0" moment "^2.27.0"
omit.js "^2.0.0" omit.js "^2.0.0"
...@@ -6079,11 +6079,6 @@ is-jpg@^2.0.0: ...@@ -6079,11 +6079,6 @@ is-jpg@^2.0.0:
resolved "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz#2e1997fa6e9166eaac0242daae443403e4ef1d97" resolved "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz#2e1997fa6e9166eaac0242daae443403e4ef1d97"
integrity sha1-LhmX+m6RZuqsAkLarkQ0A+TvHZc= integrity sha1-LhmX+m6RZuqsAkLarkQ0A+TvHZc=
is-mobile@^2.2.1:
version "2.2.2"
resolved "https://registry.npmjs.org/is-mobile/-/is-mobile-2.2.2.tgz#f6c9c5d50ee01254ce05e739bdd835f1ed4e9954"
integrity sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg==
is-module@^1.0.0: is-module@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591" resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论