2

我是新手。所以我找到了这个示例代码来使用文件池将文件上传到 Firebase 存储。上传文件时效果很好。

import * as firebase from "firebase/app";
import "firebase/storage";
import shortid from "shortid";
import * as React from "react";
import { FilePond, registerPlugin } from "react-filepond";
import "filepond/dist/filepond.min.css";
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
import debug from "debug";

const log = debug("app:image");

registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

const storage = firebase.storage().ref();

export default function ImageUpload({
  onRequestSave,
  onRequestClear,
  defaultFiles = []
}) {
  const [files, setFiles] = React.useState(defaultFiles);
  const ref = React.useRef(null);

return (
    <FilePond
      files={files}
      ref={ref}
      allowMultiple={false}
      maxFiles={1}
      server={{
        process: (
          _fieldName,
          file,
          _metadata,
          load,
          error,
          progress,
          _abort
        ) => {
          const id = shortid.generate();
          const task = storage.child("images/" + id).put(file, {
            contentType: "image/jpeg"
          });

      task.on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        snap => {
          log("progress: %o", snap);
          progress(true, snap.bytesTransferred, snap.totalBytes);
        },
        err => {
          log("error: %o", err);
          error(err.message);
        },
        () => {
          log("DONE");
          load(id);
          //   onRequestSave(id);
        }
      );
    },
    load: (source, load, error, progress, abort) => {
      progress(true, 0, 1024);

      storage
        .child("images/" + source)
        .getDownloadURL()
        .then(url => {
          let xhr = new XMLHttpRequest();
          xhr.responseType = "blob";
          xhr.onload = function(event) {
            let blob = xhr.response;
            log("loaded URL: %s", url);
            load(blob);
          };
          xhr.open("GET", url);
          xhr.send();
        })
        .catch(err => {
          error(err.message);
          abort();
        });
    }
  }}
/>
  );
}

如果我添加以下道具：

instantUpload={false}

那么 FilePond 将不会自动上传。但我想写三个函数：

handleUpload,handleRead和handleDelete:

保存、查看和删除文件。有人可以指导我实现这一目标吗？

4

0 回答 0