使用 Dropzone.JS 将图像上传到 Imgur

Question

我制作了一个页面，网站用户可以通过拖放上传图片。为此，我使用 Dropzone.JS (转到 infosite or Github) 并将文件上传到 Imgur。

问题是我不知道如何用 DropZone.JS 做到这一点。这是我用于实现 Dropzone-class.

的代码

<div class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</div>

<script src="~/Scripts/DropZone.js" type="text/javascript"></script>    

<script>
    var myDropzone = new Dropzone(".dropzone", { 
        url: "https://api.imgur.com/3/image", 
        Authorization: 'Client-ID MY_CLIENT_ID'
    });
</script>

这是我从 Imgur 得到的回复

{
    "data": {
        "error": "An image ID is required for a GET request to /image",
        "request": "/3/image",
        "method": "GET"
    },
    "success": false,
    "status": 400
}

出现此错误：

XMLHttpRequest cannot load https://api.imgur.com/3/image. Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response.

如果请求成功我也会从Imgur获取上传图片的url

Answer 1

如果来自 imgur 的 CORS-enabled 服务不通过其 Access-Control-Allow-Headers 包含 "Cache-Control"：响应 header，则不满足 CORS 要求，请求被拒绝浏览器。

试试这个：

var myDropzone = new Dropzone('.dropzone', {
    //...
    headers: {
        'Authorization': authorizationHeader,
        'Cache-Control': null,
        'X-Requested-With': null
    }
});

Answer 2

通过尝试文件 Dropzone.js 中的一些代码，我终于找到了！我添加了这行代码：

formData.append('image', file);

也感谢 Wenceslao Negrete 的回答。

使用 Dropzone.JS 将图像上传到 Imgur

Upload images to Imgur with Dropzone.JS

javascript

dropzone.js

imgur