使用react filepond和firebase存储上传和删除文件

我是新来的。因此,我找到了此示例代码,使用文件池将文件上传到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,abort) => {
      progress(true,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将不会自动上传。但是我想编写三个函数:

handleUploadhandleReadhandleDelete

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

fanabcdefg 回答:使用react filepond和firebase存储上传和删除文件

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3078832.html

大家都在问