尝试使用此库https://github.com/felixrieseberg/React-Dropzone-Component集成与dropzone的反应,但没有运气,卡住了几个小时。文件已上传但无法看到任何进度条。
export default class PhotoUpload extends Component {
constructor(props) {
super(props);
this.dropzone = null;
// For a full list of possible configurations,
// please consult http://www.dropzonejs.com/#configuration
this.djsConfig = {
acceptedFiles: "image/jpeg,image/png,image/gif",
addRemoveLinks: true,
autoProcessQueue: false
};
this.componentConfig = {
iconFiletypes: ['.jpg', '.png', '.gif'],
showFiletypeIcon: true,
postUrl: 'no-url'
};
this.callback = (file) => {
this.dropzone.processQueue();
myApi.upload(file).then((e) => {
console.log('done upload '+e.filename+' to server');
})
}
}
render() {
const config = this.componentConfig;
const djsConfig = this.djsConfig;
// For a list of all possible events (there are many), see README.md!
const eventHandlers = {
init: dz => this.dropzone = dz,
drop: this.callback,
addedfile: this.callback,
}
return <DropzoneComponent config={config} eventHandlers={eventHandlers} djsConfig={djsConfig} />
}
}
显然,这行代码不起作用:this.dropzone.processQueue();