-
-
Notifications
You must be signed in to change notification settings - Fork 97
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Core] [Dashboard] Add upload avatar (#770)
- Loading branch information
Showing
12 changed files
with
259 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,4 +15,5 @@ public class AvatarEntity | |
| { | ||
| private String type; | ||
| private String path; | ||
| private String local; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
138 changes: 138 additions & 0 deletions
138
core/datacap-ui/src/views/components/cropper/CropperHome.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| <template> | ||
| <div> | ||
| <Button class="p-0 w-full"> | ||
| <Input ref="uploadInput" type="file" accept="image/jpg, image/jpeg, image/png, image/gif" @change="selectFile"/> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <div v-if="result.blobURL || pic" class="pt-2 grid place-items-center"> | ||
| <div> | ||
| <img class="max-h-[180px]" :src="result.blobURL ? result.blobURL : pic" alt=""/> | ||
| </div> | ||
| </div> | ||
|
|
||
| <Dialog v-if="isShowModal" :is-visible="isShowModal" :title="$t('common.cropper')" @close="isShowModal = $event"> | ||
| <div class="p-0"> | ||
| <VuePictureCropper style="max-height: 400px" :boxStyle="{ width: '100%', height: '100%', backgroundColor: '#f8f8f8', margin: 'auto' }" | ||
| :options="{ viewMode: 1, dragMode: 'crop', }" :img="pic" @ready="ready"/> | ||
| </div> | ||
| <template #footer> | ||
| <div class="space-x-2"> | ||
| <Button class="btn" size="sm" @click="isShowModal = false"> | ||
| {{ $t('common.cancel') }} | ||
| </Button> | ||
| <Button class="btn" size="sm" variant="destructive" @click="clear"> | ||
| {{ $t('common.clear') }} | ||
| </Button> | ||
| <Button class="btn" size="sm" variant="destructive" @click="reset"> | ||
| {{ $t('common.reset') }} | ||
| </Button> | ||
| <Button class="btn primary" size="sm" @click="getResult"> | ||
| {{ $t('common.cropper') }} | ||
| </Button> | ||
| </div> | ||
| </template> | ||
| </Dialog> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, reactive, ref } from 'vue' | ||
| import VuePictureCropper, { cropper } from 'vue-picture-cropper' | ||
| import Button from '@/views/ui/button' | ||
| import { Input } from '@/components/ui/input' | ||
| import Dialog from '@/views/ui/dialog' | ||
| export default defineComponent({ | ||
| components: { | ||
| Dialog, | ||
| Input, | ||
| VuePictureCropper, | ||
| Button | ||
| }, | ||
| props: { | ||
| pic: { | ||
| type: String | ||
| } | ||
| }, | ||
| setup(props, { emit }) | ||
| { | ||
| const isShowModal = ref<boolean>(false) | ||
| const uploadInput = ref<HTMLInputElement | null>(null) | ||
| const pic = ref<string>(props.pic as string) | ||
| const result = reactive({ | ||
| blobURL: '' | ||
| }) | ||
| function selectFile(e: Event) | ||
| { | ||
| pic.value = '' | ||
| result.blobURL = '' | ||
| const { files } = e.target as HTMLInputElement | ||
| if (!files || !files.length) { | ||
| return | ||
| } | ||
| const file = files[0] | ||
| const reader = new FileReader() | ||
| reader.readAsDataURL(file) | ||
| reader.onload = () => { | ||
| pic.value = String(reader.result) | ||
| isShowModal.value = true | ||
| if (!uploadInput.value) { | ||
| return | ||
| } | ||
| uploadInput.value.value = '' | ||
| } | ||
| } | ||
| async function getResult() | ||
| { | ||
| if (!cropper) { | ||
| return | ||
| } | ||
| const blob: Blob | null = await cropper.getBlob() | ||
| if (!blob) { | ||
| return | ||
| } | ||
| result.blobURL = URL.createObjectURL(blob) | ||
| isShowModal.value = false | ||
| const file = await cropper.getFile() | ||
| emit('update:value', file) | ||
| } | ||
| function clear() | ||
| { | ||
| if (!cropper) { | ||
| return | ||
| } | ||
| cropper.clear() | ||
| } | ||
| function reset() | ||
| { | ||
| if (!cropper) { | ||
| return | ||
| } | ||
| cropper.reset() | ||
| } | ||
| function ready() | ||
| { | ||
| console.log('Cropper is ready.') | ||
| } | ||
| return { | ||
| uploadInput, | ||
| pic, | ||
| result, | ||
| isShowModal, | ||
| selectFile, | ||
| getResult, | ||
| clear, | ||
| reset, | ||
| ready | ||
| } | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.