JavaScript + imgur API 上传图片

技术2年前 (2022)发布不存在的铃喵

202 0 0

2018-06-06由Mashiro·博主在樱花庄的白猫发布的一篇文章。

喵喵喵？现在我仍在用的这个接口怎么就没有遇到跨域问题，算是默许吗？后来他又说以后还有通过 oauth2 限制上传的打算。倒是本身也是免费的东西，人家爱怎么做怎么做，我们自然没资格评论；只不过看情况，使用这个接口多半也不是长久之计。

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

<form id="imgur">
    <input type="file" class="imgur" accept="image/*" data-max-size="5000" />
</form>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

然后到这里申请一个 Application，在下面填入你的 Client ID：

$("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");
            });
        }
    });
});

前端上传就完成了，下面是 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; }
        ......
    }
    ......
}

# 技术