Загрузите изображения в Imgur с Dropzone.JS

Я сделал страницу, где пользователи сайта могут загружать картинку перетаскиванием. Для этого я использую Dropzone.JS (перейдите на инфосайт или 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 в предпечатном ответе.

Я также, если запрос будет успешным, получу URL-адрес загруженного изображения из Imgur.


javascript dropzone.js imgur
person H. Pauwelyn    schedule 19.01.2016    source источник
comment
Похоже, у вас может быть проблема с CORS, пожалуйста, проверьте ответ на этот связанный вопрос: stackoverflow.com/questions/25427627/   -  person Simon West    schedule 19.01.2016

Ответы (2)


arrow_upward
4
arrow_downward

Если служба с поддержкой CORS от imgur не включает «Cache-Control» через заголовок ответа Access-Control-Allow-Headers:, требования CORS не выполняются, и запрос отклоняется браузером.

Попробуйте вместо этого:

var myDropzone = new Dropzone('.dropzone', {
    //...
    headers: {
        'Authorization': authorizationHeader,
        'Cache-Control': null,
        'X-Requested-With': null
    }
});
person Wenceslao Negrete    schedule 19.01.2016
comment
Хорошо, на шаг ближе, но теперь я получил ответ от Imgur {"data": {"error": "No image data was sent to the upload api", "request": "/3/upload", "method": "POST"}, "success": false, "status": 400} - person H. Pauwelyn; 19.01.2016
comment
Под //... я имею в виду: var myDropzone = new Dropzone ('. Dropzone', {url: api.imgur.com / 3 / image, заголовки: {Авторизация: 'Client-ID MY_CLIENT_ID', 'Cache-Control': null, 'X-Requested-With': null}}); - person Wenceslao Negrete; 19.01.2016

arrow_upward
0
arrow_downward

Попробовав какой-то код в файле Dropzone.js, я наконец нашел его! Я добавил эту строку кода:

formData.append('image', file);

Также спасибо Венцеслао Негрете за его ответ.

person H. Pauwelyn    schedule 20.01.2016
comment
Не могли бы вы объяснить свое решение? - person Matthew Spence; 10.12.2016
comment
Правильный ответ - использовать конфигурацию paramName и установить для нее изображение. Но я не пробовал загружать несколько файлов. - person ; 24.06.2017