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函数..

  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>

它足够有趣，可以运行，但似乎有三个问题。

当我上传图像时，卡/盒会永久显示带有动画的旋转轮的“上传”。它永远不会完成并显示图像缩略图。
选择多张图像时，似乎只有第一个图像会出现在火场上。再也没有。
选择要上传的图像并单击“确定”时，会出现较长的暂停时间（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
                });
        }
    );
};

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

1 个答案: