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

Posted 2023-05-09

【中文标题】使用 jQuery 作为中继上传到图像服务器

【英文标题】：Upload to Image Server using jQuery as Relay

【发布时间】：2017-07-15 18:16:33

【问题描述】：

问题：

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

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

约束：

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

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

我已经在 SO 上看到了一些解决方案，将文件下载为字节数组，但没有任何东西可以说明如何上传。

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;
  );

【问题讨论】：

先发出一个ajax请求下载图片，然后再发出一个把数据上传到端点。

@bejado - 对。所以很明显我将不得不发出一个 AJAX 请求来下载图像，但我想将它保存为一个字节数组（或其他东西），它不会保存到最终用户的机器上，然后我可以上传到终点，我不知道怎么搭桥。

我认为您不需要将其保存为字节数组。 $.ajax() 响应有一个 responseText 参数，其中包含原始数据。为什么不把它发布到你的服务器上呢？

【参考方案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);
  );