2

我学习了 React，现在我使用Uppy，所以用户可以选择要上传的文件。

当用户选择他的文件时，文件通过设置隐藏showSelectedFiles={false}

我使用自己的组件来显示选定的文件，并使用以下方式获取文件：

  .on("file-added", (file) => {
    const { setFile } = props;
    setFile(file);
    const newList = this.state.files.concat({ file });
    this.setState({
      files: { newList },
    });
  });

对于添加到的每个文件Dashboard，setFile(file);都将文件对象发送到我的自定义视图。问题是由 自动创建的预览图像 BlobDashboard在此阶段不存在。

在此处输入图像描述

如何将文件获取到我的自定义 GUI 以显示它们，包括图像预览 Blob？

我是 React 和 JavaScript 的新手，所以请保持温和:)

完整代码：

import React from "react";

import "@uppy/status-bar/dist/style.css";
import "@uppy/drag-drop/dist/style.css";
import "@uppy/progress-bar/dist/style.css";
import "./styles.css";
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";

const Uppy = require("@uppy/core");
// const Dashboard = require("@uppy/dashboard");
const GoogleDrive = require("@uppy/google-drive");
const Dropbox = require("@uppy/dropbox");
const Instagram = require("@uppy/instagram");
const Webcam = require("@uppy/webcam");
const Tus = require("@uppy/tus");
const ThumbnailGenerator = require("@uppy/thumbnail-generator");

const {
  Dashboard,
  DashboardModal,
  DragDrop,
  ProgressBar,
} = require("@uppy/react");

class DashboardUppy extends React.Component {
  constructor(props) {
    super(props);
    this.form = React.createRef();
    this.state = {
      showInlineDashboard: false,
      open: false,
      files: [],
    };

    this.uppy = new Uppy({
      id: "uppy1",
      autoProceed: false,
      debug: true,
      allowMultipleUploads: true,
      proudlyDisplayPoweredByUppy: true,
      restrictions: {
        // maxFileSize: 1000000,
        maxNumberOfFiles: 100,
        minNumberOfFiles: 1,
        allowedFileTypes: null,
      },
      onBeforeFileAdded: (currentFile, files) => {
        console.log(files);
        const modifiedFile = Object.assign({}, currentFile, {
          name: currentFile + Date.now(),
        });
        if (!currentFile.type) {
          // log to console
          this.uppy.log(`Skipping file because it has no type`);
          // show error message to the user
          this.uppy.info(`Skipping file because it has no type`, "error", 500);
          return false;
        }
        return modifiedFile;
      },
    })
      .use(Tus, { endpoint: "https://master.tus.io/files/" })
      .use(GoogleDrive, { companionUrl: "https://companion.uppy.io" })
      .use(Dropbox, {
        companionUrl: "https://companion.uppy.io",
      })
      .use(Instagram, {
        companionUrl: "https://companion.uppy.io",
      })
      .use(Webcam, {
        onBeforeSnapshot: () => Promise.resolve(),
        countdown: false,
        modes: ["video-audio", "video-only", "audio-only", "picture"],
        mirror: true,
        facingMode: "user",
        locale: {
          strings: {
            // Shown before a picture is taken when the `countdown` option is set.
            smile: "Smile!",
            // Used as the label for the button that takes a picture.
            // This is not visibly rendered but is picked up by screen readers.
            takePicture: "Take a picture",
            // Used as the label for the button that starts a video recording.
            // This is not visibly rendered but is picked up by screen readers.
            startRecording: "Begin video recording",
            // Used as the label for the button that stops a video recording.
            // This is not visibly rendered but is picked up by screen readers.
            stopRecording: "Stop video recording",
            // Title on the “allow access” screen
            allowAccessTitle: "Please allow access to your camera",
            // Description on the “allow access” screen
            allowAccessDescription:
              "In order to take pictures or record video with your camera, please allow camera access for this site.",
          },
        },
      }).use(ThumbnailGenerator, {
        thumbnailWidth: 200,
        // thumbnailHeight: 200 // optional, use either width or height,
        waitForThumbnailsBeforeUpload: true
      })
      .on("thumbnail:generated", (file, preview) => {
        const img = document.createElement("img");
        img.src = preview;
        img.width = 100;
        document.body.appendChild(img);
      })
      .on("file-added", (file) => {
        const { setFile } = props;
        setFile(file);
        const newList = this.state.files.concat({ file });
        this.setState({
          files: { newList },
        });
      });
  }

  componentWillUnmount() {
    this.uppy.close();
  }

  render() {
    const { files } = this.state;
    this.uppy.on("complete", (result) => {
      console.log(
        "Upload complete! We’ve uploaded these files:",
        result.successful
      );
    });

    return (
      <div>
        <div>
            <Dashboard
              uppy={this.uppy}
              plugins={["GoogleDrive", "Webcam", "Dropbox", "Instagram"]}
              metaFields={[
                { id: "name", name: "Name", placeholder: "File name" },
              ]}
              open={this.state.open}
              target={document.body}
              onRequestClose={() => this.setState({ open: false })}
              showSelectedFiles={false}
            />
        </div>
      </div>
    );
  }
}

export default DashboardUppy;
4

1 回答 1

0

也遇到了这个问题，因为我想使用图像预览来确定底层图像的纵横比。

如果您使用Dashboard或ThumbnailGenerator用于 Uppy，则每次上传都会发出一个事件：

uppy.on('thumbnail:generated', (file, preview) => {
  const img = new Image();
  img.src = preview;
  img.onload = () => {
    const aspect_ratio = img.width / img.height;
    // Remove image if the aspect ratio is too weird.
    // TODO: notify user.
    if (aspect_ratio > 1.8) {
      uppy.removeFile(file.id);
    }
  }
});

我意识到你已经在你的代码中寻找这个事件。我想回答你的问题，只是把你的逻辑放在那里而不是 in file-added。

于 2021-07-11T22:39:11.940 回答