上传组件基本功能的实现

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>

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>()