如何使用带有 antd 上传功能的 CustomRequest 将图片上传到 Firebase？

Question

我正在尝试使用 antd 上传组件和 pictures wall 示例将图像上传到我的 Firebase 存储。

最初我尝试使用操作属性as out lined here 得到相同的结果。然后，我尝试使用该问题的解决方案中概述的 customRequest 表单。在挣扎了一整天之后，我似乎无法让它工作。显然我不太明白发生了什么。

我的各种变化功能..

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handleChange = (info) => {
    console.log('handleChange',info);
    if (info.file.status === 'uploading') {
      console.log('setting loading to true');
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      console.log('setting loading to false');
      getBase64(info.file.originFileObj, imageUrl => this.setState({
        imageUrl,
        loading: false
      }));
    }
  };

我的自定义上传功能..

  customUpload = async ({ onError, onSuccess, file }) => {
    console.log("customUpload called");
    console.log(file);
    const storage = firebase.storage();
    const metadata = {
        contentType: 'image/jpeg'
    };
    const storageRef = await storage.ref();
    // const imageName = generateHashName() //a unique name for the image
    const imgFile = storageRef.child(`Property Photos/${file}.png`);
    try {
      const image = await imgFile.put(file, metadata);
      onSuccess(null, image);
    }
    catch(e) {
       onError(e);
    };
  };

我的渲染 JSX..

<Form.Item label="Photos">
  <div className="clearfix">
    <Upload
      listType="picture-card"
      fileList={fileList}
      multiple={true}
      accept="image"
      onPreview={this.handlePreview}
      onChange={this.handleChange}
      customRequest={this.customUpload}
    >
      {this.imageUrl ? <img src={this.imageUrl} alt="avatar" /> : uploadButton}
    </Upload>
    <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
      <img alt="example" style={{ width: '100%' }} src={previewImage} />
    </Modal>
  </div>
</Form.Item>

它运行起来很有趣，但似乎有三个问题..

1. 当我上传图片时，卡片/盒子会永远显示“上传”和动画旋转轮。它永远不会完成并显示图像缩略图。
2. 在选择多个图像时，似乎只有第一个最终会出现在 Firebase 上。再也没有..
3. 在选择要上载和单击确定的图像时，很长的暂停（5秒？），如应用程序挂起，然后再次单击任何内容。不知道为什么会这样。

感觉就像我只是不明白如何使用这个 customRequest 属性..

Answer 1

一般情况下，需要做的是：将antd Upload的“onProgress”、“onSuccess”和“onError”回调函数连接到cloudStorage上传函数对应的事件观察者上。

https://firebase.google.com/docs/storage/web/upload-files#monitor_upload_progress

所以，customRequest 函数可以是：

let customRequest = ({
    file,
    onSuccess,
    onError,
    onProgress,
}) => {
    var uploadTask = storageRef.child(`images/${file.name}`).put(file);

    // Register three observers:
    // 1. 'state_changed' observer, called any time the state changes
    // 2. Error observer, called on failure
    // 3. Completion observer, called on successful completion
    uploadTask.on(
        "state_changed",
        function (snapshot) {
            // Observe state change events such as progress, pause, and resume
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
            var progress =
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log("Upload is " + progress + "% done");

            // CONNECT ON PROGRESS
            onProgress(progress)

            switch (snapshot.state) {
                case firebase.storage.TaskState.PAUSED: // or 'paused'
                    console.log("Upload is paused");
                    break;
                case firebase.storage.TaskState.RUNNING: // or 'running'
                    console.log("Upload is running");
                    break;
            }
        },
        function (error) {
            // Handle unsuccessful uploads

            // CONNECT ON ERROR
            onError(error)
        },
        function () {
            // Handle successful uploads on complete
            // For instance, get the download URL: https://firebasestorage.googleapis.com/...
            uploadTask.snapshot.ref
                .getDownloadURL()
                .then(function (downloadURL) {
                    console.log("File available at", downloadURL);
 
                    // CONNECT ON SUCCESS
                    onSuccess(downloadURL)  // Pass any parameter you would like
                });
        }
    );
};