支持URL粘贴上传

README.md

@@ -26,6 +26,7 @@
   - 上传文件实现呼吸灯效果
 - **人性化上传**
   - 支持一键切换上传方式（**拖拽点击、粘贴**）
+  - 粘贴上传支持**文件**和**URL**
   - 支持批量上传（不限同时选择文件数量，但为了保证稳定性，同时处于上传状态的文件最多为10个）
   - 上传显示实时上传进度
   - **上传后图片无需手动点击，可直接展示在管理页面中**
@@ -207,6 +208,7 @@ API格式：
 5. ~~增加随机图API（2024.7.25已完成）~~
 6. ~~完善多格式链接展示形式，增加ubb格式链接支持（2024.8.21已完成）~~
 7. ~~完善登录逻辑，后端增加认证码校验接口（2024.8.21已完成）~~
+8. ~~支持URL粘贴上传（2024.8.23已完成）~~
 
 ### 4.2Fix Bugs👻
 
@@ -219,6 +221,18 @@ API格式：
 - 请检查你的cloudflare防火墙设置（例如hotlink保护是否开启）
 - 参见[Issue #8](https://github.com/MarSeventh/CloudFlare-ImgBed/issues/8)
 
+### 5.2如何通过PicGo上传？
+
+- PicGo插件设置中搜索`web-uploader`，安装可自定义前缀的版本，如图：
+
+  ![](https://alist.sanyue.site/d/imgbed/202408231141491.png)
+
+- 打开`图床设置`->`自定义Web图床`->`Default`，然后按照下图方式配置，注意API地址和自定义图片URL前缀按照自己的域名进行修改：
+
+  ![](https://alist.sanyue.site/d/imgbed/202408231145750.png)
+
+- 设置完成，确定即可使用PicGo上传到自建的图床。
+
 ## 6.Tips
 
 前端开源，参见[MarSeventh/Sanyue-ImgHub](https://github.com/MarSeventh/Sanyue-ImgHub?tab=readme-ov-file)项目。

css/329.a46adae7.css

@@ -0,0 +1 @@
+@keyframes breathe-3d98df6c{50%{box-shadow:0 0 10px 5px #409eff;opacity:.8}}.upload-form[data-v-3d98df6c],.upload-list-card[data-v-3d98df6c]{display:flex;flex-direction:column;justify-content:center;align-items:center}.upload-list-card[data-v-3d98df6c]{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-3d98df6c]{width:55vw;height:7vh}.upload-list-card.upload-list-busy[data-v-3d98df6c],.upload-list-container.upload-list-busy[data-v-3d98df6c]{height:35vh}.upload-list-item[data-v-3d98df6c]{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-3d98df6c]{font-size:small;font-weight:700;width:28vw;margin-bottom:5px}.upload-list-item-content[data-v-3d98df6c]{display:flex;flex-direction:column;margin-left:10px}.upload-list-item-url-text[data-v-3d98df6c]{width:28vw}.upload-list-item-url-row[data-v-3d98df6c]{display:flex;flex-direction:row;align-items:center}.upload-list-item-progress[data-v-3d98df6c]{margin-top:3px;width:28vw}.upload-list-item-action[data-v-3d98df6c]{display:flex;flex-direction:column;align-items:center}.upload-list-item-action-button[data-v-3d98df6c]{margin:2px}.upload-card[data-v-3d98df6c]{width:55vw;padding:20px;background:none}.upload-card-busy[data-v-3d98df6c] .el-upload-dragger{height:25vh}.paste-mode[data-v-3d98df6c] .el-upload{pointer-events:none}[data-v-3d98df6c] .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-3d98df6c] .el-upload-dragger.is-dragover,[data-v-3d98df6c] .el-upload-dragger:hover{opacity:.8;box-shadow:0 0 10px 5px #409eff}.is-uploading[data-v-3d98df6c] .el-upload-dragger{animation:breathe-3d98df6c 3s infinite}.el-upload__text[data-v-3d98df6c]{font-weight:700;font-size:medium;-webkit-user-select:none;-moz-user-select:none;user-select:none}.el-upload__tip[data-v-3d98df6c]{font-size:small;color:#faebd7;-webkit-user-select:none;-moz-user-select:none;user-select:none}.upload-list-dashboard[data-v-3d98df6c]{display:flex;justify-content:space-between;align-items:center;padding:10px}.upload-list-dashboard-title[data-v-3d98df6c]{font-size:medium;font-weight:700}.page-footer[data-v-7c801e22]{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-7c801e22]{color:#faebd7;font-weight:700;text-decoration:none}.toolbar[data-v-2e0cf1bd]{position:fixed;bottom:8vh;right:1.5vw;display:flex;flex-direction:column;align-items:center;z-index:100}.toolbar-button[data-v-2e0cf1bd]{border:none;transition:all .3s ease;margin-bottom:10px;margin-left:0}.toolbar-button[data-v-2e0cf1bd]:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.1);transform:translateY(-3px)}[data-v-2e0cf1bd] .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-2e0cf1bd]{display:flex;justify-content:center;margin-top:20px}.header[data-v-2e0cf1bd]{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-2e0cf1bd]{background:linear-gradient(90deg,#effac3,#f3a060);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}.logo[data-v-2e0cf1bd]{height:80px;width:80px;margin-right:5px}.upload-home[data-v-2e0cf1bd]{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-2e0cf1bd]{position:fixed;top:20vh}

functions/api/fetchRes.js

@@ -0,0 +1,38 @@
+export async function onRequest(context) {
+    // 获取请求体中URL的内容，判断是否为图片或视频，如果是则返回，否则返回错误信息
+    const {
+        request,
+        env,
+        params,
+        waitUntil,
+        next,
+        data
+    } = context;
+    //如果是OPTIONS请求，返回允许的方法
+    if (request.method === 'OPTIONS') {
+        return new Response(null, {
+            headers: {
+                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+                'Access-Control-Allow-Headers': 'Content-Type'
+            }
+        })
+    }
+    const jsonRequest = await request.json();
+    const url = jsonRequest.url;
+    if (url === undefined) {
+        return new Response('URL is required', { status: 400 })
+    }
+    const response = await fetch(url);
+    const contentType = response.headers.get('content-type');
+    if (contentType.startsWith('image') || contentType.startsWith('video')) {
+        //增加跨域头后返回
+        const headers = new Headers(response.headers);
+        headers.set('Access-Control-Allow-Origin', '*');
+        return new Response(response.body, {
+            headers: headers
+        })
+    } else {
+        return new Response('URL is not an image or video', { status: 400 })
+    }
+}

functions/random.js

@@ -34,7 +34,7 @@ export async function onRequest(context) {
             }
         }
         // if param 'type' is set to 'img', return the image
-        if (randomType === 'img') {
+        if (randomType == 'img') {
             // Return an image response
             randomUrl = protocol + '//' + domain + ':' + port + randomPath;
             return new Response(await fetch(randomUrl).then(res => res.blob()), {

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.cda6ef19.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.75ecb3aa.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>