javascript - 使用 jQuery 作为中继上传到图像服务器

Question

问题:

在这种情况下，我想将文件(pdf、图像等)上传到接受其中一种文件类型的 API 端点。但是，该文件位于某处的另一个 Web 服务上。我正在尝试设计一个聪明的解决方案，它允许我 (a) 下载远程文件(并将其作为字节存储在内存或其他东西中)然后 (b) 通过 API 上传该文件。

我有 jQuery 代码演示了如何在没有后端代码的情况下使用 jQuery 上传本地文件，但我想扩展它以允许我上传远程存储的内容。 p>

约束:

• 我不想在我的图片上传页面上使用任何后端基础设施(即没有 php、python、ruby 等)
• 我不希望我的表单的最终用户需要将文件下载到他们的机器并在两步过程中上传文件。

到目前为止我得到了什么:

我在 SO 上看到了一些解决方案，这些解决方案在将文件下载为 bytearray 方面连接了这里的点，但没有任何内容可以演示如何上传它。

• Download File from Bytes in JavaScript
• jQuery-only File Upload to Stripe API *

请记住，Stripe 是我的示例，但我想尝试在 Imgur 或其他 API 上复制它(如果我能让它正常工作)。希望其他人有一些想法!

  $('#fileinfo').submit(function(event) {
    event.preventDefault();

    var data = new FormData();

    var publishableKey = 'pk_test_***';

    data.append('file', $('#file-box')[0].files[0]);
    data.append('purpose', 'identity_document');

    $.ajax({
      url: 'https://uploads.stripe.com/v1/files',
      data: data,
      headers: {
        'Authorization': 'Bearer ' + publishableKey,
        // 'Stripe-Account': 'acct_STRIPE-ACCOUNT-ID'
      },
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
    }).done(function(data) {
      $('#label-results').text('Success!');
      $('#upload-results').text(JSON.stringify(data, null, 3));
    }).fail(function(response, type, message) {
      $('#label-results').text('Failure: ' + type + ', ' + message);
      $('#upload-results').text(JSON.stringify(response.responseJSON, null, 3));
    });

    return false;
  });

Answer 1

我实际上是通过这样做为 Stripe 工作的:

https://jsfiddle.net/andrewnelder/up59zght/

var publishableKey = "pk_test_xxx";  // Platform Publishable Key
var stripeAccount = "acct_xxx";  // Connected Account ID

$(document).ready(function () {
    $('#file-upload').on('submit', function (e) {
    e.preventDefault();

    console.log('Clicked!');

    var route = $('#file-route').val();  // URL OF FILE
    var fname = route.split("/").slice(-1)[0].split("?")[0];

    var blob = fetchBlob(route, fname, uploadBlob);

  });
});

function fetchBlob(route, fname, uploadBlob) {

  console.log('Fetching...')

  var oReq = new XMLHttpRequest();
  oReq.open("GET", route, true);
  oReq.responseType = "blob";
  oReq.onload = function(e) {
    var blob = oReq.response;
    console.log('Fetched!')
    uploadBlob(fname, blob);
  };
  oReq.send();

}

function uploadBlob(fname, blob) {

  var fd = new FormData();
  fd.append('file', blob);
  fd.append('purpose', 'identity_document');

    console.log('Uploading...');

    $.ajax({
    url: 'https://uploads.stripe.com/v1/files',
    data: fd,
    headers: {
      'Authorization': 'Bearer ' + publishableKey,
      'Stripe-Account': stripeAccount
    },
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
  }).done(function(data) {
    console.log('Uploaded!')
  }).fail(function(response, type, message) {
    console.log(message);
  });

}