From 0faa66dbcec1850fcfe3eef1c1a104fede7fb877 Mon Sep 17 00:00:00 2001
From: cuihaoran <1054346513@qq.com>
Date: Mon, 14 Dec 2020 20:11:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E5=8A=9F=E8=83=BD=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/index.vue | 73 +++++++++++++++++++++++++++++++++
 src/view/Home/index.vue         |  5 ++-
 2 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Upload/index.vue

diff --git a/src/components/Upload/index.vue b/src/components/Upload/index.vue
new file mode 100644
index 0000000..d96f8c0
--- /dev/null
+++ b/src/components/Upload/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="file-upload">
+    <button class="btn btn-primary" @click.prevent="triggerUoload">
+      <span v-if="fileStatus === 'loading'">正在上传...</span>
+      <span v-else-if="fileStatus === 'success'">上传成功</span>
+      <span v-else>点击上传</span>
+    </button>
+    <input
+      type="file"
+      class="file-input d-none"
+      ref="fileInput"
+      @change="handleFileChange"
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import axios from 'axios'
+type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
+export default defineComponent({
+  props: {
+    action: {
+      type: String,
+      required: true
+    }
+  },
+  setup (props) {
+    const fileInput = ref<null | HTMLElement>(null)
+    const fileStatus = ref<UploadStatus>('ready')
+    const triggerUoload = () => {
+      if (fileInput.value) {
+        fileInput.value.click()
+      }
+    }
+    const handleFileChange = (e: Event) => {
+      const currentTarget = e.target as HTMLInputElement
+      if (currentTarget.files) {
+        fileStatus.value = 'loading'
+        const files = Array.from(currentTarget.files)
+        const formData = new FormData()
+        formData.append('file', files[0])
+        axios.post(props.action, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        }).then(result => {
+          console.log('result ----->', result.data)
+          fileStatus.value = 'success'
+        }).catch(e => {
+          console.log('error--->', e)
+          fileStatus.value = 'error'
+        }).finally(() => {
+          if (fileInput.value) {
+            const fileInputEle = fileInput.value as HTMLInputElement
+            fileInputEle.value = ''
+          }
+        })
+      }
+    }
+    return {
+      fileInput,
+      triggerUoload,
+      fileStatus,
+      handleFileChange
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
diff --git a/src/view/Home/index.vue b/src/view/Home/index.vue
index 06bf24e..6231a8b 100644
--- a/src/view/Home/index.vue
+++ b/src/view/Home/index.vue
@@ -11,6 +11,7 @@
         </div>
       </div>
     </section>
+    <upload action="/upload"></upload>
     <h4 class="font-weight-bold text-center">发现精彩</h4>
     <column-list :list="list"></column-list>
   </div>
@@ -21,10 +22,12 @@ import { defineComponent, computed, onMounted } from 'vue'
 import { useStore } from 'vuex'
 import { GlobalDataProps } from '../../store/index'
 import ColumnList from '../../components/ColumnList/index.vue'
+import Upload from '../../components/Upload/index.vue'
 
 export default defineComponent({
   components: {
-    ColumnList
+    ColumnList,
+    Upload
   },
   setup () {
     const store = useStore<GlobalDataProps>()