问题描述
我是新来的，我收到这个错误，不知道为什么请建议： 看起来错误是在 Uppy 里面。
我像 .use(Dashboard,{... 一样关注 Uppy Tutorial docs 并且它正在工作，但突然出现此错误，我尝试回溯但没有运气
我从“我的设备”添加文件，然后发生错误，在我缺少的任何地方都没有断点
import React from "react";
import "@uppy/core/dist/style.css";
import "@uppy/status-bar/dist/style.css";
import "@uppy/drag-drop/dist/style.css";
import "@uppy/progress-bar/dist/style.css";
import "@uppy/dashboard/dist/style.css";
import "./styles.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 {
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,};
this.uppy = new Uppy({
id: "uppy1",autoproceed: false,debug: true,allowMultipleUploads: true,showSelectedFiles: true,restrictions: {
maxFileSize: 1000000,maxnumberOfFiles: 100,minNumberOfFiles: 1,allowedFileTypes: ['image/*','video/*'],},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,})
.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.",})
.on("file-added",(file) => {
const { setFiles } = props;
setFiles(file);
})
}
componentwillUnmount() {
this.uppy.close();
}
render() {
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 })}
/>
</div>
</div>
);
}
}
export default DashboardUppy;
我像这样使用它没什么特别的：
import React,{ useState } from "react";
import FileList from "./FileList";
import FileForm from "./FileForm";
import DashboardUppy from "./DashboardUppy";
import { Container,Grid } from "@material-ui/core";
const CreateContent = () => {
const [file,setItems] = useState();
const [show,showDashboardUppy] = useState(true);
return (
<Container maxWidth="lg">
{show ? (
<DashboardUppy showDashboardUppy={showDashboardUppy}/>
) : (
<Grid container spacing={3}>
<Grid item lg={4} md={6} xs={12}>
<FileList setItems={setItems} />
</Grid>
<Grid item lg={8} md={6} xs={12}>
<FileForm file={file} />
</Grid>
</Grid>
)}
</Container>
);
};
export default CreateContent;
这里是 package.json
{
"name": "react-firestore-crud","version": "0.1.0","private": true,"dependencies": {
"@uppy/core": "1.0.2","@uppy/dropBox": "latest","@uppy/form": "^1.3.23","@uppy/google-drive": "1.0.2","@uppy/instagram": "1.0.2","@uppy/react": "^1.0.2","@uppy/status-bar": "latest","@uppy/tus": "1.0.2","@uppy/webcam": "latest","@uppy/xhr-upload": "^1.6.8","@material-ui/core": "^4.11.2","@material-ui/icons": "^4.11.2","@material-ui/lab": "^4.0.0-alpha.57","@material-ui/styles": "^4.11.2","@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.3.2","@testing-library/user-event": "^7.1.2","bootstrap": "^4.5.2","clsx": "^1.1.1","firebase": "^7.23.0","moment": "^2.29.1","prop-types": "^15.7.2","react": "^16.8.4","react-dom": "^16.8.4","react-perfect-scrollbar": "^1.5.8","react-router-dom": "^5.2.0","react-scripts": "^3.4.0","uuid": "^8.3.2"
},"scripts": {
"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
},"eslintConfig": {
"extends": "react-app"
},"browserslist": {
"production": [
">0.2%","not dead","not op_mini all"
],"development": [
"last 1 chrome version","last 1 firefox version","last 1 safari version"
]
}
}
解决方法
我在 package.json 中使用了错误的 Uppy 版本 嗯