Question

我想从网站加载带有XHR请求的图像并将其传递给服务器。

我制作了这段代码来显示我下载的图片：

#Generated from coffeescript
GoogleDrivePicker.prototype.getUrl = function(file) {
  var accessToken, xhr;
  accessToken = gapi.auth.getToken().access_token;
  xhr = new XMLHttpRequest();
  xhr.open('GET', file.downloadUrl);
  xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
  xhr.onload = (function(_this) {
    return function() {
      var blob, reader;
      blob = new Blob([xhr.responseText], {
        type: 'image/jpeg'
      });
      blob.name = 'Test.jpg';
      blob.type = "image/jpeg";
      reader = new FileReader();
      reader.addEventListener('loadend', function(e) {
        return $('.col-md-5 > img:nth-child(1)').attr('src', e.target.result);
      });
      return reader.readAsDataURL(blob);
    };
  })(this);
  return xhr.send();
};

结果只是空白。我可以在开发者控制台上看到图像正确加载。

我正在使用像fileupload('add', {files: [blob], filename: 'blob.jpg'})这样的fileupload传递图像。

我认为图片格式不正确，因为我遇到了这个错误：

["Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: `identify /tmp/mini_magick20160212-1-1xik1k5.jpg` failed with error:\nidentify.im6: Not a JPEG file: starts with 0xef 0xbf `/tmp/mini_magick20160212-1-1xik1k5.jpg' @ error/jpeg.c/JPEGErrorHandler/316.\n"

当我使用文本编辑器查看图像时，它从：

开始

����^@^PJFIF^@^A^A^@^@^A^@^A^@^@��^ARCAMERA       : E995V1.6

它采用UTF-8格式。

在原始文件中，它是：

^@^PJFIF^@^A^A^@^@^A^@^A^@^@^ARCAMERA       : E995V1.6

关于latin1格式。

我尝试转换文件格式但没有成功。

我该怎么办？

Answer 1

下载文件时，您可以将响应类型指定为带xhr.responseType = 'blob'的blob：

  function download(url, callback) {
    var xhr = new XMLHttpRequest()
    xhr.responseType = 'blob';
    xhr.onreadystatechange = function(event) {
      if (event.target.readyState == 4) {
        if (event.target.status == 200 || event.target.status == 0) {
          //Status 0 is setup when protocol is "file:///" or "ftp://"
          var blob = this.response;
          callback(blob);
          //Use blob to upload the file
        } else {
          console.error('Unable to download the blob');
        }
      }
    };
    xhr.open('GET', url, true);
    xhr.send();
  }

然后使用以下代码使用请求的send(blob)方法上传blob对象：

function upload(url, blob, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(event) {
    if (event.target.readyState == 4) {
      if (event.target.status == 200) {
        //Blob uploaded to server
        callback(true);
      } else {
        //An error occurred when uploading file
      }
    }
  };
  xhr.open('PUT', url, true);
  xhr.send(blob);
}

最后使用这些功能：

download('http://example.com/file.jpg', function(blob) {
  upload('http://example.com/upload', blob, function() {
    //finished
  });
});

Check here了解有关如何接收和发送二进制数据的更多详细信息。

从XHR请求加载图像，然后将其传递给服务器

1 个答案: