如何在我的 Uppy 自定义设置中获取 Blob 图像预览

Posted 2023-05-08

【中文标题】如何在我的 Uppy 自定义设置中获取 Blob 图像预览

【英文标题】：How to get the Blob image preview in my Uppy Custom setup

【发布时间】：2021-04-21 09:50:29

【问题描述】：

我学习了 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); 正在将文件对象发送到我的自定义视图。问题是Dashboard 自动创建的预览图像 Blob 在此阶段不存在。

如何将文件添加到我的自定义 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;

【问题讨论】：

你能添加所有代码，而不仅仅是这个小剪辑

【参考方案1】：

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

如果您将 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);
    
  
);

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