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

Question

我制作了一个页面，该站点的用户可以使用拖放功能上传图片。 为此，我使用Dropzone.JS （转到infosite或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>

这是我从伊姆古尔得到的回应

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

出现此错误：

XMLHttpRequest无法加载https://api.imgur.com/3/image 。 在飞行前响应中， Access-Control-Allow-Headers不允许请求标头字段Cache-Control 。

如果请求成功，我也将从Imgur获取上传图片的网址。

Answer 1

如果imgur中启用CORS的服务未通过其Access-Control-Allow-Headers：响应头包括“ Cache-Control”，则不满足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的回答。