improve upload button

src/components/Main.vue

 <script setup>
-    import {NButton} from 'naive-ui'
-    import {NUpload} from 'naive-ui'
+    import {NButton,NMessageProvider} from 'naive-ui'
+    import UploadButton from './UploadButton.vue'
 </script>
 <template>
     <div class="main-wrapper">
@@ -8,19 +8,9 @@
             <n-button strong secondary type="tertiary">
                 &nbsp;Edit text&nbsp;
             </n-button>
-            <n-upload
-                action="请求提交的地址"
-                    :headers="{//HTTP 请求需要附加的 Headers
-                    'naive-info': 'hello!'//提交表单需要附加的数据
-                    }"
-                    :data="{
-                    'naive-data': 'cool! naive!'
-                    }"
-                >
-                <n-button strong secondary type="tertiary">
-                    Upload File
-                </n-button>
-            </n-upload>
+            <n-message-provider>
+            <UploadButton/>
+            </n-message-provider>
         </div>
         <div class="text-area">
             <textarea id="paste-panel" placeholder="Put your paste here" name="input" cols="100" rows="10"></textarea>     

src/components/UploadButton.vue

+<script>
+import { defineComponent } from "vue";
+import { useMessage,NButton,NUpload } from "naive-ui";
+
+export default defineComponent({
+    components:{
+        NButton,
+        NUpload
+    },
+  setup() {
+    let support=[   'pdf',
+                    'txt',
+                    'c','cpp','cxx','txx','c++','C','cc','h','hpp','hxx',
+                    'cs',
+                    'java','class',
+                    'py','py3',
+                    'js',
+                    'go',
+                    ]
+    const message = useMessage();
+    return {
+      async beforeUpload(data) {
+        let filename = data.file.file.name.split('.').pop().toLowerCase();
+        let correctFile = false;
+        support.forEach(element => {
+            if(element==filename){
+                correctFile=true
+            }
+        });
+        if (!correctFile) {
+          message.error("只能上传pdf,txt,C,C++,C#,Java,Python,JS,Goland文件，请重新上传");
+          return false;
+        }
+        return true;
+      }
+    };
+  }
+});
+</script>
+
+<template>
+  <n-upload
+    multiple
+    :max="1"
+    action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+    @before-upload="beforeUpload"
+  >
+    <n-button strong secondary type="tertiary">upload file</n-button>
+  </n-upload>
+</template>