本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

2019-10-29 | 编程技术 | 4665 次阅读 | 等你评论 | 5 次点赞 | 繁体


上图如无法正常显示则以下方法可能已失效!

大致比较了一下,支持 API 上传的图床,国内基本是没有合适的了,国外的话稳定性最高的大概就是 Flickr 和 Imgur;因为 Flickr 有容量限制所以不予考虑。剩下的 Imgur 试了一下现在居然还能裸连!但是呢毕竟是外国的东西,国内访问速度受限不说,指不定哪天也被墙挡了;解决方法倒很简单,Nginx 反代一下就可以了。

下面参照 Imgur 的文档写了一个简单的 Ajax 上传示例。

1、首先到这里申请一个 Application:https://api.imgur.com/oauth2/addclient

2、然后在下面替换你的 Client ID:

<form id="imgur">
    <input type="file" class="imgur" accept="image/*" data-max-size="5000" />
</form>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script>
$("document").ready(function () {
    $('input[type=file]').on("change", function () {
        var $files = $(this).get(0).files;
        var formData = new FormData();
        formData.append("image", $files[0]);
        if ($files.length) {
            // Reject big files
            if ($files[0].size > $(this).data("max-size") * 1024) {
                console.log("Please select a smaller file");
                return false;
            }
            // Replace {{Your Client ID }} with your own API key
            var apiUrl = 'https://api.imgur.com/3/image';
            var apiKey = '{{Your Client ID }}';
            var settings = {
                "async": true,
                "crossDomain": true,
                "url": apiUrl,
                "method": "POST",
                "datatype": "json",
                "headers": {
                    "Authorization": "Client-ID " + apiKey
                },
                "processData": false,
                "contentType": false,
                "data": formData,
                beforeSend: function () {
                    console.log("上传中...");
                },
                success: function (res) {
                    $('body').append('<img src="' + res.data.link + '" />');
                },
                error: function () {
                    alert("上传失败");
                }
            }
            $.ajax(settings).done(function (res) {
                console.log("Done");
            });
        }
    });
});
</script>

3、前端上传就完成了,下面是 Nginx 反代:

server {
    ......
    # 图片文件镜像
    location ^~ /imgur/ {
        proxy_pass https://i.imgur.com/;
        proxy_buffering off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 取消下面的注释可以启用 Nginx 缓存
        #proxy_cache            STATIC;
        #proxy_cache_key $uri;  
        #proxy_cache_valid      200  30d;
        #proxy_cache_use_stale  error timeout invalid_header updating
        #                       http_500 http_502 http_503 http_504;
        #add_header X-Nginx-Cache $upstream_cache_status;
    }
 
    # API 镜像
    location ^~ /imgur-api/ {
        # 跨域,注意不要和前面的跨域策略冲突/重复
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 
                   'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
 
        proxy_pass https://api.imgur.com/;
        proxy_buffering off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    ......
}

之后就可以通过 https://your.domain/imgur/koe07fX.jpg 访问原 URL 为 https://i.imgur.com/koe07fX.jpg 的图片了;

把 Ajax 上传脚本里的 apiUrl 换成 https://your.domain/imgur-api/3/image 就可以通过镜像上传了。

暂时不清楚 Imgur 是否对单个 IP 有上传和下载限制,所以为了避免自己的镜像被滥用,建议限制一下 Referer:

map $http_referer $allow_referer {
        default             0;
        ""                  1;
        "~2heng.xin"        1;
        "~\.google\."       1;
        "~\.baidu\."        1;
    }
map $allow_referer $disallow_referer {
    0       1;
    1       "";
}
 
server {
    ......
    location balabala {
        ......
        if ( $http_referer = "") { return 403; }
        if ( $disallow_referer ) { return 403; }
        ......
    }
    ......
}

如果需要生成缩略图,只需要将url修改一下即可,例如:

原图(cdn.wangtwothree.com/imgur/jgGhE5d.jpg):

缩略图(cdn.wangtwothree.com/imgur/jgGhE5d_d.webp?shape=thumb):

via:https://2heng.xin/2018/06/06/javascript-upload-images-with-imgur-api/

标签: javascript图床

猜你喜欢
Lazysizes.js图片懒加载的使用
lazysizes 是一种快速(无垃圾),对 SEO 友好且可自动初始化的 lazyloader,用于图像(包括响应图像 picture/ srcset),iframe,脚本/小部件等。它还通过...
通用的检测到广告屏蔽插件进行弹窗提示实现方法
用的 js 方法来检测,按理说所有博客都能使用,就是在打开网页的时候进行一次判断。如果发现没有加载广告代码,就会出来一个弹窗来提示浏览者将本站加到广告拦截插件的白名单里面。别喷我,个人站长经营实...
javascript | 原生JS多语言切换简单实现
由于项目需要实现一个前端的多语言切换,不想因为一个简单的功能就引入 jQuery,所以经过 google 编程大法摸索出一个原生 JS 就可以实现的多语言前端切换的小例子,仅供参考。<bo...
原生js实现ajax方法
由于不想多引入一个 jquery,百度了一个原生 js 实现 ajax 的方法(超简单),挺不错的,现在就分享给大家,也给大家做个参考。首先新建一个 js 文件:function ajax(){...
github 的黑夜模式小猫咪动画源码
github 上的小猫咪黑夜模式切换很可爱,想要~ 。于是花了点时间扒了下来放在了自己的博客上。秉着开源精神,将源码分享给大家。废话少说,上代码html:<!-- 暗黑模式 --> ...
最简单的方式使用原生 js 发送 http 请求
使用场景1、检查接口可用性主要用于在没有引入 jQuery 等工具的页面上需要验证一些 api 能否调得通的时候,可以快速调出浏览器调试界面发请求。 这在判断是否存在跨域问题的场景下,特别好用。...
去除某些博客阅读全文需要关注公众号的限制
最近好像突然流行起来了在博客里面设置阅读全文需要关注公众号获取验证码的垃圾操作,甚至一些托管在 github pages 上的静态博客也搞了,实在是一种脱裤子放屁的行为。 需要获取验证码的案例如
Web 加载速度优化清单,让你的网站快上加快
网页加载速度是衡量一个网页好坏的重要标准,网页遗弃率随网页加载时间的增加而增加。据说近一半的用户希望网页加载时间不超过 2s,超过 3s 一般就放弃该网页。时间就是生命,干等着,谁愿意平白无故地 +1
(首次提交评论需审核通过才会显示,请勿重复提交)