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

当前位置:首页 / 正文

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


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

大致比较了一下,支持 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 能否调得通的时候,可以快速调出浏览器调试界面发请求。 这在判断是否存在跨域问题的场景下,特别好用。...
仿网易评论盖楼 JS 实现 | html
看了些评论引用盖楼的网站,觉得网易的效果比较好,简单明了,让人看了就知道是引用评论,迟点准备自己也写个玩玩,应该能从中学到不少东西. 前端部分实现如下:https://www.phpvar.co...
什么是防抖和节流?vue 中如何使用防抖和节流
什么是防抖和节流?vue 中如何使用防抖和节流介绍在 JavaScript 中,防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件,比如监听滚动、点赞功能,总不能点一次赞就向后台...
免费 GoogleDrive 无限容量团队盘
![](https://cdn.wangtwothree.com/imgur/ABy1AK7.png) 『温馨提示:重要的资料,做好多重备份,担心翻车的可以搞一个放着也行』 # 申请方法
JavaScript + imgur API 上传图片
![](https://cdn.wangtwothree.com/imgur/jgGhE5d.jpg) 上图如无法正常显示则以下方法可能已失效! 大致比较了一下,支持 API 上传的图床,国内
Fail2Ban安装使用及常用配置教程
Fail2Ban安装使用教程 因为作为一个 linux 入门级别的小白, 很多人都会把一些 web 面板(比如宝塔面板)作为自己管理 vps 的首选, 而当我一段时间登录宝塔面板之后, 有时就会看到
(首次提交评论需审核通过才会显示,请勿重复提交)