JavaScript + imgur API 上传图片
上图如无法正常显示则以下方法可能已失效！
大致比较了一下，支持 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/