add:fronted

2023-08-11 19:26:49 +08:00
parent a39cdadc96
commit 490b3605a4
31 changed files with 3752 additions and 0 deletions
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { UploadFilled } from '@element-plus/icons-vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { request } from "@/utils/request";
+import { useFileDataStore } from "@/stores/fileData";
+import { useFileBoxStore } from "@/stores/fileBox";
+const fileBoxStore = useFileBoxStore();
+const fileStore = useFileDataStore();
+const props = defineProps({
+  shareData: {
+    type: Object,
+    default: () => {
+      return {
+        expireValue: 1,
+        expireStyle: 'day',
+        targetType: 'file',
+      }
+    }
+  }
+})
+
+const fileList: any = ref([])
+const uploadBox: any = ref(null)
+const handleOnChangeFileList = (file: any) => {
+  fileStore.addShareData({
+    'name': file.name,
+    'text': '',
+    'status': file.status,
+    'percentage': 0,
+    'size': file.size,
+    'type': file.raw.type,
+    'uid': file.uid,
+  });
+};
+
+const handleHttpRequest = (options: any) => {
+  fileBoxStore.showFileBox = true;
+  const formData = new FormData();
+  formData.append('file', options.file);
+  formData.append('expireValue', props.shareData.expireValue);
+  formData.append('expireStyle', props.shareData.expireStyle);
+  formData.append('targetType', props.shareData.targetType);
+  request(
+      {
+        url: "share/file/",
+        method: "post",
+        data: formData,
+        onUploadProgress: (event: any) => {
+          const percentage = Math.round((event.loaded * 100) / event.total) || 0;
+          fileStore.shareData.forEach((file: any) => {
+            if (file.uid === options.file.uid) {
+              file.percentage = percentage;
+              fileStore.save();
+            }
+          });
+        }
+      }
+  ).then((res: any) => {
+    const data = res.data.data;
+    fileStore.shareData.forEach((file: any) => {
+      if (file.uid === options.file.uid) {
+        file.status = 'success';
+        file.text = data.text;
+        file.code = data.code;
+        fileStore.save();
+      }
+    });
+  }).catch((err: any) => {
+    fileStore.shareData.forEach((file: any) => {
+      if (file.uid === options.file.uid) {
+        file.status = 'fail';
+        file.text = err.message;
+        fileStore.save();
+      }
+    });
+  });
+};
+function pasteLister(event: any) {
+    const items = event.clipboardData && event.clipboardData.items;
+    if (items && items.length) {
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].kind === 'string') {
+          if (items[i].type.match(/^text\/plain/)) {
+            items[i].getAsString(function(str) {
+              console.log(str);
+            });
+          }
+        } else {
+          const file: any = items[i].getAsFile();
+          if (file) {
+            console.log(file);
+            const uid = Date.now();
+            file.uid = uid;
+            fileStore.addShareData({
+              'name': file.name,
+              'text': '',
+              'status': 'ready',
+              'percentage': 0,
+              'size': file.size,
+              'type': file.type,
+              'uid': uid,
+            });
+            handleHttpRequest({
+              file: file,
+            })
+        }
+      }
+    }
+  }
+}
+onUnmounted(()=>{
+  // 清除剪切板事件
+  document.removeEventListener('paste', pasteLister);
+})
+onMounted(()=>{
+  document.addEventListener('paste', pasteLister);
+})
+</script>
+
+<template>
+  <div>
+    <el-upload
+        class="upload-demo"
+        drag
+        action="http://127.0.0.1:8000/share"
+        multiple
+        :show-file-list="false"
+        ref="uploadBox"
+        v-model:file-list="fileList"
+        :on-change="handleOnChangeFileList"
+        :http-request="handleHttpRequest"
+    >
+      <el-icon class="el-icon--upload">
+        <upload-filled/>
+      </el-icon>
+      <div class="el-upload__text">
+        将文字、文件拖、粘贴到此处，或 <em>点击上传</em>
+      </div>
+      <div class="el-upload__text" style="font-size: 10px;">天数&lt;7或限制次数（24h后删除）</div>
+      <template #tip>
+        <div class="el-upload__tip">
+        </div>
+      </template>
+    </el-upload>
+  </div>
+</template>
+
+<style lang="scss">
+.el-upload {
+  border-radius: 20px;
+}
+
+.el-upload-dragger {
+  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2);
+  border-radius: 20px;
+}
+</style>