BlueImp jQuery 文件上传到 Imgur答案

【问题标题】：BlueImp jQuery File Upload to ImgurBlueImp jQuery 文件上传到 Imgur
【发布时间】：2014-06-18 22:04:58
【问题描述】：

我想使用 BlueImp jQuery fileupload 插件将图像上传到 imgur 并取回链接。

虽然 API 没有正式支持它，但看起来可以；但是我尝试过的所有配置都给了我来自 Imgur 的错误，即我没有传递我正在传递的一些数据。

这是插件的链接：

https://github.com/blueimp/jQuery-File-Upload

这是我最后一次代码尝试：

<input id="imageupload" type="file" name="file" accept="image/jpg, image/jpeg, image/png, image/gif" multiple>

$(function () {

$('#imageupload').fileupload({
  url: 'https://api.imgur.com/3/image',
  headers: {
    Authorization: 'Client-ID XXXXXXXX'
  },
  dataType: 'json',
  data: {
    image: 'file'
  },
  done: function (e, data) {
    $.each(data.result.files, function (index, file) {
      $('<p/>').text(file.name).appendTo('#files');
    });
  },
  progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css('width',progress + '%');
  }
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');

});

上传小于 1MB 的 PNG 或 JPG 得到的响应是：

{"data":{"error":"Image format not supported, or image is corrupt.","request":"\/3\/image","method":"POST"},"success":false,"status":400}

有人对如何使它工作有任何想法吗？

【问题讨论】：

标签： javascript jquery file-upload imgur

【解决方案1】：

如果您对此仍有疑问，删除“dateType”和“data”对我有用

dataType: 'json',
data: {
    image: 'file'
  }

然后记录数据

 done: function (e, data) {

     console.log(data);
 }

【讨论】：

【解决方案2】：

我刚刚尝试了没有以下 CSS 的代码，它可以工作！

data: {
    image: 'file'
}

这是我的代码：

$('#image-upload').fileupload({
        headers: {"Authorization": "Client-ID xxxxxxxxxxx"},
        url: "https://api.imgur.com/3/image",
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css('width', progress + '%');
        }
});

<input id="image-upload" type="file" name="image">
     <div id="progress">
          <div class="bar" style="width: 0%;">
     </div>
</div>

【讨论】：