自用github当图床工具。

自己用的github当图床工具。方便自己写有需要的时候快速上传。
并且用cdn加载,无需翻墙即可访问。
上传后会自动放到裁剪版。

index.html

<!DOCTYPE html>
<html>
<body>

<h2>Upload Image to GitHub</h2>

<input type="file" id="fileInput">
<button onclick="uploadImage()">Upload</button>

<!-- 添加用于显示URLs的元素 -->
<div id="originalUrl" style="margin-top: 20px;"></div>
<div id="cdnUrl" style="margin-top: 10px;"></div>

<script src="script.js"></script>
</body>
</html>

script.js

function uploadImage() {
    const fileInput = document.getElementById('fileInput');
    if (!fileInput.files.length) {
        alert('Please select a file.');
        return;
    }
    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.onloadend = function() {
        const content = reader.result.split(',')[1];
        uploadToGitHub(content);
    };

    reader.readAsDataURL(file);
}

function uploadToGitHub(content) {
    const token = 'xxxxxxxxxxxxxxxxxxx'; // 请替换xxxxxxx为你的GitHub Token
    const username = 'xxxxxxxxx'; // 替换xxxxxxxx为你的GitHub用户名
    const repo = 'xxxxxxxxxxx'; // 替换xxxxx为你的GitHub仓库名
    const branch = 'main'; // 仓库分支
    const filename = `image_${new Date().getTime()}.jpg`; // 文件名基于当前时间戳
    const path = filename; // 上传的路径

    const url = `https://api.github.com/repos/${username}/${repo}/contents/${path}`;

    const data = {
        message: `Uploading ${filename}`,
        content: content,
        branch: branch
    };

    fetch(url, {
        method: 'PUT',
        headers: {
            'Authorization': `token ${token}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.content && data.content.download_url) {
            const cdnUrl = `https://cdn.jsdelivr.net/gh/${username}/${repo}@${branch}/${filename}`;
            const originalUrl = data.content.download_url;
            
            // 更新页面元素以显示URLs
            document.getElementById('originalUrl').innerHTML = `Original URL: <a href="${originalUrl}" target="_blank">${originalUrl}</a>`;
            document.getElementById('cdnUrl').innerHTML = `CDN URL: <a href="${cdnUrl}" target="_blank">${cdnUrl}</a>`;

            // 自动复制CDN URL到剪贴板
            navigator.clipboard.writeText(cdnUrl).then(() => {
                alert(`CDN URL copied to clipboard: ${cdnUrl}`);
            }).catch(err => {
                console.error('Could not copy text: ', err);
                alert('Failed to copy CDN URL to clipboard.');
            });
        } else {
            alert('Failed to get the image URL.');
        }
    })
    .catch(error => {
        console.error('Failed to upload image:', error);
        alert('Failed to upload image.');
    });
}

GitHub Token可以去 https://gpt.iil.im 问gpt4 怎么获取
将index.html文件和script.js文件放在一起到/www/xxx目录
用caddy运行即可
可以问gpt怎么caddy运行他。
/etc/caddy目录下

域名.com {
root * /www/xxxx
file_server
}

9 Likes

github也会被薅(

基操 哈哈哈我的服务器硬盘都有限

我之前star了个写的比较完整的:GitHub - XPoet/picx: 🏞️ PicX 是一款基于 GitHub API 开发的图床工具,提供图片上传托管、生成图片链接和常用图片工具箱服务。

3 Likes

这不太好吧……

51f4b1af072d7989ba54cb92c964ca77

cf我记得也可以

24 Likes

cf+telegram 好像

666666

1 Like

哈哈哈确实,用的jsdelivr cdn违反了它的政策了 :police_car:

地址暴露了

卧槽哪里

确定显示前

GitHub Token 写在前端的话… 这个应用千万不要对外开放。

会噶号

https://github.com/xiaozhou26/gh-photo
蒙恬佬,我一个月之前业余写了个和你这个一样的,也一直在想怎么将js部署到cloudflare worker但是无果

1 Like

比我猛 哈哈哈 这个反正不占用本机硬盘,我就直接挂vps了,偶尔用一下

哈哈,可以的,就是不知道Github 会不会有意见~ :face_in_clouds:

1 Like

感觉不大保险,现在有很多内鬼喜欢举报。
我用cf家的图床,加tg图床备用,每次上传前本地转成webp再上传。

2 Likes

确实不保险