我在React应用中使用Uppy,但无论什么时候我使用uppy.use(Dashboard)都会报错:

Error:Your plugin must have an id
import React from 'react';
import Uppy from '@uppy/core';
import Tus from '@uppy/tus';
import { DragDrop, Dashboard } from '@uppy/react';
import '@uppy/core/dist/style.css';
import '@uppy/drag-drop/dist/style.css';
import '@uppy/dashboard/dist/style.css';

const uppy = new Uppy({
    meta: { type: 'avatar' },
    restrictions: { maxNumberOfFiles: 1,  allowedFileTypes: ['image/*'] },
    autoProceed: true,
});

uppy.use(Dashboard, {
    id: 'Dashboard',
    trigger: '.UppyModalOpenerBtn',
    inline: true,
    target: '.DashboardContainer',
    replaceTargetContent: true,
    showProgressDetails: true,
    note: 'Images and video only, 2–3 files, up to 1 MB',
    width: 200,
    height: 200,
    maxHeight: 200,
    metaFields: [
      { id: 'name', name: 'Name', placeholder: 'file name' },
      { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
    ],
    browserBackButtonClose: true
})

uppy.use(Tus, { endpoint: '/upload' });

uppy.on('complete', (result) => {
    const url = result.successful[0].uploadURL;
    console.log(url)
});

class FileUploader extends React.Component {
    constructor (props) {
      super(props)
      this.uppy = uppy;
    }

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

    render () {
      return <Dashboard uppy={this.uppy} />
    }
  }

export default FileUploader;
发布于 2020-11-26 17:18
共1个回答
UJ
游客uJLTPs

当使用React组件时,你不需要使用 uppy.use(Dashboard)<Dashboard />组件以及做了这个工作。

你只需要在<Dashboard />中传入你的Dashboard插件的选项即可。

回答问题