From 665e26c83341a9d38bf53d08a7402f3966dc2814 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Sat, 26 Dec 2020 17:53:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8F=92=E5=85=A5=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UploadInput.vue        |  1 +
 src/views/Editor/CanvasTool/index.vue | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/UploadInput.vue b/src/components/UploadInput.vue
index baa98066..78f5da85 100644
--- a/src/components/UploadInput.vue
+++ b/src/components/UploadInput.vue
@@ -39,6 +39,7 @@ export default defineComponent({
     return {
       handleClick,
       handleChange,
+      inputRef,
     }
   },
 })
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index 841a25d6..8382a2ca 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -7,7 +7,9 @@
 
     <div class="add-element-handler">
       <IconFont class="handler-item" type="icon-font-size" />
-      <IconFont class="handler-item" type="icon-image" />
+      <UploadInput @change="files => insertImageElement(files)">
+        <IconFont class="handler-item" type="icon-image" />
+      </UploadInput>
       <IconFont class="handler-item" type="icon-star" />
       <IconFont class="handler-item" type="icon-line" />
       <IconFont class="handler-item" type="icon-table" />
@@ -26,11 +28,18 @@
 import { defineComponent, computed } from 'vue'
 import { useStore } from 'vuex'
 import { State } from '@/store'
+import { getImageDataURL } from '@/utils/image'
 import useScaleCanvas from '@/hooks/useScaleCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+import useCreateElement from '@/hooks/useCreateElement'
+
+import UploadInput from '@/components/UploadInput.vue'
 
 export default defineComponent({
   name: 'canvas-tool',
+  components: {
+    UploadInput,
+  },
   setup() {
     const store = useStore<State>()
     const canvasScale = computed(() => store.state.canvasScale)
@@ -42,6 +51,14 @@ export default defineComponent({
     const { scaleCanvas } = useScaleCanvas()
     const { redo, undo } = useHistorySnapshot()
 
+    const { createImageElement } = useCreateElement()
+
+    const insertImageElement = (files: File[]) => {
+      const imageFile = files[0]
+      if(!imageFile) return
+      getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
+    }
+
     return {
       scaleCanvas,
       canvasScalePercentage,
@@ -49,6 +66,7 @@ export default defineComponent({
       canRedo,
       redo,
       undo,
+      insertImageElement,
     }
   },
 })
@@ -74,6 +92,7 @@ export default defineComponent({
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  display: flex;
 }
 .handler-item {
   margin: 0 10px;