增加粘贴上传功能

README.md

@@ -4,13 +4,15 @@
 
 ## 1.Introduction
 
-[cf-pages/Telegraph-Image](https://github.com/cf-pages/Telegraph-Image)项目的重制版，实现了**登录鉴权**、**上传图片预览**、**多文件上传**、**拖拽上传**、**整体复制**、**多格式复制**等功能。
+[cf-pages/Telegraph-Image](https://github.com/cf-pages/Telegraph-Image)项目的重制版，实现了**登录鉴权**、**上传图片预览**、**一键切换上传方式**（**拖拽上传**、**粘贴上传**）、**多文件上传**、**整体复制**、**多格式复制**等功能。
 
 ![](https://alist.sanyue.site/d/imgbed/202407211140999.png)
 
-![](https://alist.sanyue.site/d/imgbed/202407201643245.png)
+![image-20240722104315281](https://alist.sanyue.site/d/imgbed/202407221043832.png)
 
-![](https://alist.sanyue.site/d/imgbed/202407201643374.png)
+![image-20240722104406761](https://alist.sanyue.site/d/imgbed/202407221044182.png)
+
+![image-20240722104418816](C:\Users\King.xx\AppData\Roaming\Typora\typora-user-images\image-20240722104418816.png)
 
 ## 2.Features
 
@@ -24,6 +26,7 @@
 - 上传后图片无需手动点击，可直接展示在管理页面中
 - 支持Web和API上传认证（感谢[hl128k](https://github.com/hl128k)）
 - 支持访问域名限制（感谢[hl128k](https://github.com/hl128k)）
+- 支持一键切换上传方式（拖拽点击、粘贴）
 
 ## 3.Deployment
 
@@ -67,7 +70,7 @@ Web端在登录页面输入你的认证码即可。
 
 ## 4.TODO
 
-1. 增加粘贴图片上传功能
+1. ~~增加粘贴图片上传功能（2024.7.22已完成）~~
 2. ~~增加markdown、html等格式链接复制功能（2024.7.21已完成）~~
 3. ~~上传页面增加管理端入口（2024.7.21已完成）~~
 

css/133.c21510ac.css

@@ -0,0 +1 @@
+@keyframes breathe-727a3340{50%{box-shadow:0 0 10px 5px #409eff;opacity:.8}}.upload-form[data-v-727a3340],.upload-list-card[data-v-727a3340]{display:flex;flex-direction:column;justify-content:center;align-items:center}.upload-list-card[data-v-727a3340]{width:55vw;height:7vh;margin-top:10px;border-radius:15px;opacity:.8;background-color:hsla(0,0%,100%,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.upload-list-container[data-v-727a3340]{width:55vw;height:7vh}.upload-list-card.upload-list-busy[data-v-727a3340],.upload-list-container.upload-list-busy[data-v-727a3340]{height:35vh}.upload-list-item[data-v-727a3340]{display:flex;align-items:center;justify-content:space-between;margin:5px;border:1px solid #a5bef7;padding:5px;border-radius:15px}.upload-list-item-name[data-v-727a3340]{font-size:small;font-weight:700;width:28vw}.upload-list-item-content[data-v-727a3340]{display:flex;flex-direction:column;margin-left:10px}.upload-list-item-url-text[data-v-727a3340]{width:28vw}.upload-list-item-progress[data-v-727a3340]{margin-top:3px;width:28vw}.upload-list-item-action[data-v-727a3340]{display:flex;flex-direction:column;align-items:center}.upload-list-item-action-button[data-v-727a3340]{margin:2px}.upload-card[data-v-727a3340]{width:55vw;padding:20px;background:none}.upload-card-busy[data-v-727a3340] .el-upload-dragger{height:25vh}.paste-mode[data-v-727a3340] .el-upload{pointer-events:none}[data-v-727a3340] .el-upload-dragger{display:flex;flex-direction:column;justify-content:center;align-items:center;height:45vh;border-radius:15px;border:3px dashed #409eff;opacity:.7;background-color:hsla(0,0%,100%,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}[data-v-727a3340] .el-upload-dragger.is-dragover,[data-v-727a3340] .el-upload-dragger:hover{opacity:.8;box-shadow:0 0 10px 5px #409eff}.is-uploading[data-v-727a3340] .el-upload-dragger{animation:breathe-727a3340 3s infinite}.el-upload__text[data-v-727a3340]{font-weight:700;font-size:medium;-webkit-user-select:none;-moz-user-select:none;user-select:none}.el-upload__tip[data-v-727a3340]{font-size:small;color:#faebd7;-webkit-user-select:none;-moz-user-select:none;user-select:none}.upload-list-dashboard[data-v-727a3340]{display:flex;justify-content:space-between;align-items:center;padding:10px}.upload-list-dashboard-title[data-v-727a3340]{font-size:medium;font-weight:700}.page-footer[data-v-4e5e0802]{position:fixed;bottom:0;display:flex;justify-content:center;align-items:center;width:100vw;color:#f0f8ff;font-size:large;-webkit-user-select:none;-moz-user-select:none;user-select:none}.footer-name[data-v-4e5e0802]{color:#faebd7;font-weight:700;text-decoration:none}.toolbar[data-v-45439480]{position:fixed;bottom:8vh;right:1.5vw;display:flex;flex-direction:column;align-items:center;z-index:100}.toolbar-button[data-v-45439480]{border:none;transition:all .3s ease;margin-bottom:10px;margin-left:0}.toolbar-button[data-v-45439480]:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.1);transform:translateY(-3px)}[data-v-45439480] .el-dialog{border-radius:12px;background-color:hsla(0,0%,100%,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 10px 2px rgba(0,0,0,.1)}.dialog-action[data-v-45439480]{display:flex;justify-content:center;margin-top:20px}.header[data-v-45439480]{display:flex;justify-content:center;align-items:center;padding:15px;position:fixed;top:5vh;color:#ffebcd;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none}.main-title[data-v-45439480]{background:linear-gradient(90deg,#effac3,#f3a060);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}.logo[data-v-45439480]{height:80px;width:80px;margin-right:5px}.upload-home[data-v-45439480]{display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:url(https://imgbed.sanyue.site/file/0dbd5add3605a0b2e8994.jpg);background-size:cover;background-attachment:fixed;height:100vh}.upload[data-v-45439480]{position:fixed;top:20vh}

index.html

@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><title>Sanyue ImgHub</title><script defer="defer" src="/js/chunk-vendors.eef14227.js"></script><script defer="defer" src="/js/app.874b80bf.js"></script><link href="/css/chunk-vendors.b85f6a1a.css" rel="stylesheet"><link href="/css/app.93429def.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sanyue_imghub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><title>Sanyue ImgHub</title><script defer="defer" src="/js/chunk-vendors.eef14227.js"></script><script defer="defer" src="/js/app.9c4f365d.js"></script><link href="/css/chunk-vendors.b85f6a1a.css" rel="stylesheet"><link href="/css/app.93429def.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sanyue_imghub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>