我在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
共2个回答
UJ
游客uJLTPs
当使用React组件时,你不需要使用 uppy.use(Dashboard)
,<Dashboard />
组件以及做了这个工作。
你只需要在<Dashboard />
中传入你的Dashboard插件的选项即可。
回答问题