JavaScript + imgur API 上传图片

👋 相关阅读

• Darkmode.Js – 一键为网站添加黑暗模式

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

大致比较了一下，支持 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/

×