[英]Upload images to Imgur with Dropzone.JS
I've made a page where the users of the site can upload a picture with drag 'n drop. 我制作了一个页面,该站点的用户可以使用拖放功能上传图片。 For this I use Dropzone.JS (go to infosite or Github ) and I will upload the files to Imgur. 为此,我使用Dropzone.JS (转到infosite或Github ),然后将文件上传到Imgur。
The problem is that I didn't know how I can do this with DropZone.JS. 问题是我不知道如何使用DropZone.JS做到这一点。 Here is my code I use for implement the Dropzone
-class. 这是我用于实现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>
Here is the response I get from Imgur 这是我从伊姆古尔得到的回应
{
"data": {
"error": "An image ID is required for a GET request to /image",
"request": "/3/image",
"method": "GET"
},
"success": false,
"status": 400
}
With this error: 出现此错误:
XMLHttpRequest
cannot load https://api.imgur.com/3/image .XMLHttpRequest
无法加载https://api.imgur.com/3/image 。 Request header fieldCache-Control
is not allowed byAccess-Control-Allow-Headers
in preflight response. 在飞行前响应中,Access-Control-Allow-Headers
不允许请求标头字段Cache-Control
。
I will also if the request succeed, get the url of the uploaded image from Imgur. 如果请求成功,我也将从Imgur获取上传图片的网址。
If the CORS-enabled service from imgur does not include "Cache-Control" via its Access-Control-Allow-Headers: response header, the CORS requirements are not satisfied and the request is rejected by the browser. 如果imgur中启用CORS的服务未通过其Access-Control-Allow-Headers:响应头包括“ Cache-Control”,则不满足CORS要求,浏览器将拒绝该请求。
Try this instead: 尝试以下方法:
var myDropzone = new Dropzone('.dropzone', {
//...
headers: {
'Authorization': authorizationHeader,
'Cache-Control': null,
'X-Requested-With': null
}
});
By trying some code in the file Dropzone.js, I finally found it! 通过尝试文件Dropzone.js中的一些代码,我终于找到了它! I've added this line of code: 我添加了以下代码行:
formData.append('image', file);
Also thanks to Wenceslao Negrete for his or her answer. 也感谢Wenceslao Negrete的回答。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.