React.js Firebase获取调整后的URL并删除原始上传

Question

我有一个项目，用户可以在其中上传图片，并且从Firebase取回URL。 另外，在Firebase一侧有一个调整图像大小的功能。

但是我不太确定如何返回调整后的图像而不是原始图像。目前，当我获得原始URL时，我只需添加“调整大小”并基本上在前端更改URL。但是它绝对不正确。

import React, { Component } from "react";
import firebase from "./firebase";
import FileUploader from "react-firebase-file-uploader";
import CustomUploadButton from "react-firebase-file-uploader/lib/CustomUploadButton";
import { connect } from "react-redux";
import { postImage } from "../../ducks/imageReducer";

class ImgUploader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      item: "",
      isUploading: false,
      progress: 0,
      itemURL: ""
    };
  }

  handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
  handleProgress = progress => this.setState({ progress });
  handleUploadError = error => {
    this.setState({ isUploading: false });
    console.error(error);
  };
  handleUploadSuccess = filename => {
    this.setState({ item: filename, progress: 100, isUploading: false });
    firebase
      .storage()
      .ref()
      .child(filename)
      .getDownloadURL()
      .then(url => this.setState({ itemURL: url }))
      .then(() =>
        this.props.postImage(
          this.props.postId,
          this.state.itemURL.replace("/o/", "/o/resized-") //<--This is NOT CORRECT
        )
      );
  };

  //   uploadUrlToDatabase() {
  //     this.props.postImage(this.props.postID, this.state.itemURL);
  //   }

  render() {
    console.log(this.props);
    return (
      <div className="upload-image">
        <form>
          {console.log(this.state.itemURL)}
          {console.log("Final state is", this.state.avatarURL)}
          <CustomUploadButton
            accept="image/*"
            name="item"
            randomizeFilename
            storageRef={firebase.storage().ref()}
            onUploadStart={this.handleUploadStart}
            onUploadError={this.handleUploadError}
            onUploadSuccess={this.handleUploadSuccess}
            onProgress={this.handleProgress}
            multiple
            style={{
              display: "flex",
              justifyCcontent: "center",
              backgroundColor: "steelblue",
              margin: "20vh 25vw 0vh 25vw",
              color: "white",
              padding: 40,
              borderRadius: 4
            }}
          >
            Upload images
          </CustomUploadButton>
          {this.state.isUploading && <p>Progress: {this.state.progress}</p>}
          {this.state.isUploading === false && this.state.progress === 100 ? (
            <h1>UPLOADED</h1>
          ) : null}
        </form>
      </div>
    );
  }
}
const mapStateToProps = state => state;

export default connect(
  mapStateToProps,
  { postImage }
)(ImgUploader);

还有我的Firebase脚本

const functions = require("firebase-functions");
const gcs = require("@google-cloud/storage")();
const os = require("os");
const path = require("path");
const spawn = require("child-process-promise").spawn;


exports.onFileChange = functions.storage
  .bucket()
  .object()
  .onFinalize(event => {
    const bucket = event.bucket;
    const contentType = event.contentType;
    const filePath = event.name;
    console.log("File change detected, function execution started");

    if (path.basename(filePath).startsWith("resized-")) {
      console.log("We already renamed that file!");
      return;
    }

    const destBucket = gcs.bucket(bucket);
    const tmpFilePath = path.join(os.tmpdir(), path.basename(filePath));
    const metadata = { contentType: contentType };
    return destBucket
      .file(filePath)
      .download({
        destination: tmpFilePath
      })
      .then(() => {
        return spawn("convert", [
          tmpFilePath,
          "-resize",
          "500x500",
          tmpFilePath
        ]);
      })
      .then(() => {
        return destBucket.upload(tmpFilePath, {
          destination: "resized-" + path.basename(filePath),
          metadata: metadata
        });
      });
  });

上传后如何在Firebase中获取缩小尺寸的图像并自动删除原始图像？