Question

我创建了一个页面，网站的用户可以通过拖放来上传图片。为此我使用Dropzone.JS （转到infosite或Github），我会将文件上传到Imgur。

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

<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无法加载 https://api.imgur.com/3/image 。预检响应中Cache-Control不允许请求标题字段Access-Control-Allow-Headers。

如果请求成功，我也会从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的回答。

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

2 个答案: