javascript - 如何使用ant design Upload组件在javascript中实现XMLHttpRequest发送到google云存储？

Question

我正在尝试使用 XML API 上传到谷歌云存储。这是用于执行此操作的示例表单。 谢谢布兰登·亚伯勒

<form action="http://my-bucket.storage.googleapis.com" method="post" enctype="multipart/form-data">
   <input type="text" name="key" value="">
   <input type="hidden" name="signature" value="sample_token=">
   <input name="file" type="file">
   <input type="submit" value="Upload">
</form>

我也在使用 ant design Upload 组件来做到这一点。

https://ant.design/components/upload/

文档表明使用 'customRequest' 属性能够实现您自己的 XMLHttpRequest。此外，它还链接到更多描述“customRequest”接收的对象的文档，我在下面将其作为参数进行了解构。

https://github.com/react-component/upload#customrequest

我已经尝试实现。

render() {
  const props = {
    name: 'file',
    action: '//localhost:3000/my-express-endpoint',
    data: {
      'key': 'value'
    },
    customRequest({ onProgress, onError, onSuccess, data, filename, file, withCredentials, action, headers }) {
      let data = new FormData();   // Using FormData counting on browser support.
      data.append('signature', 'sample_token');

      let xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://my-bucket.storage.googleapis.com', true);
      xhr.onload = function () {
        // do something to response
        console.log(this.responseText);
      };
      xhr.send(data);
    }
  };

  return (
    <div className="container">
      <Dragger {...props}>
        ...drop file here
      </Dragger>
    </div>
  )
}

我不清楚如何执行customRequest。由于我要覆盖，这是否会使 customRequest Prop 之外的其他 Prop name, action, data 无效，并且现在在 customRequest Prop 内部处理，因为它们是相同的？另外，由于我使用 XML api 直接上传到谷歌云存储，这是否意味着我不再需要使用 my-express-endpoint 来处理它并使用服务器端的 multer 等来处理它？<​​/p>

Answer 1

对于初学者:action和data当您提供 customRequest 时，选项属性不适用。因此，您是对的，您不再需要您的 Express 端点，因为您的 Express 服务器不参与事务。

更困难的部分是处理文件对象。当您使用<input type=file ...>时在某种形式(如您的第一个示例中)中，幕后发生了一些魔法。

当您自己创建 XHR 时，您必须自己完成这个魔术(实际上是读取文件)。推荐阅读:页面下方三分之二的“处理二进制数据”部分 https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

但是还有更好的方法。我建议使用 xhr 包装器来为您完成这项工作。如https://github.com/axios/axios ，它可以直接处理您在customRequest中获取的File对象。