你如何在 javascript 中使用 ant design 上传组件实现 XMLHttpRequest 以发送到 google 云存储？

Question

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

<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 上传组件来做到这一点。

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。因为我重写了，所以 name, action, data 在 customRequest 道具之外的其他道具无效，现在在 customRequest 道具内部处理，因为那些是一样的？此外，由于我使用 XML api 直接上传到 google 云存储，这是否意味着我不再需要使用 my-express-endpoint 处理它并使用 for服务器端的示例 multer?

Answer 1

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

比较困难的部分是处理文件对象。当您在表单中使用 <input type=file ...> 时（如您的第一个示例），幕后会发生一些魔术。

当您自己创建 XHR 时，您必须自己完成这种魔法（实际上是读取文件）。推荐阅读："Dealing with binary data" 部分位于页面下方三分之二的 https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

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

你如何在 javascript 中使用 ant design 上传组件实现 XMLHttpRequest 以发送到 google 云存储？

How do you implement XMLHttpRequest in javascript using ant design Upload component to send to google cloud storage?

javascript

google-cloud-storage

reactjs

antd