显示上传预览并使用 Dropzone 反应停止自动上传

Question

现在当用户按下上传按钮并选择文件时，它会自动上传文件，但我不想进行自动上传，我想先向用户显示文件他们选择，然后上传。我需要帮助，请帮忙。这一切都是在反应中完成的。

const TITLE = 'Resources'

class ResourceStep extends React.Component {

onDrop(files) {
var file = files[0];
axios.get('/awsUrl', {
headers: {
filename: file.name,
filetype: file.type
}
})
.then(function (result) {
var signedUrl = result.data;
var options = {
headers: {
'Content-Type': file.type
}
};
return axios.put(signedUrl, file, options);
})
.then(function (result) {
console.log(result);
})
.catch(function (err) {
console.log(err);
});
}
render() {
let dropzoneRef;
return (
<div>
<Paper style={style} zDepth={3}>
<div style={{textAlign:'center'}}>
<label> Upload ID : <RaisedButton style={{marginLeft: '20px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label>
<br/>
<br/>
<br/>
<label> Upload Picture : <RaisedButton style={{marginLeft: '30px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label>
<br/>
<br/>
<br/>
<label> Upload Logo : <RaisedButton style={{marginLeft: '45px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label>
</div>
<Dropzone ref={(node) => { dropzoneRef = node; }} onDrop={ (files) => this.onDrop(files) } style={{display:'none'}}/>
</Paper>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
initialValues: state.application.Resources
};
};
ResourceStep = reduxForm({
form: 'ResourceStep'
})(ResourceStep)

export default {
Cmp: ResourceStep = connect(mapStateToProps)(ResourceStep),
TITLE
};

Answer 1

只需使用文件上的preview属性并将其设置为imgsrc。

class ResourceStep extends React.Component {
constructor() {
super();
this.state = {
file: {},
};
}
onDrop = (files) => {
var file = files[0];
this.setState({ file });
}
submitFile = () => {
axios.get('/awsUrl', {
headers: {
filename: this.state.file.name,
filetype: this.state.file.type
}
})
.then(function (result) {
var signedUrl = result.data;
var options = {
headers: {
'Content-Type': this.state.file.type
}
};
return axios.put(signedUrl, this.state.file, options);
})
.then(function (result) {
console.log(result);
})
.catch(function (err) {
console.log(err);
});
}
render() {
let dropzoneRef;
return (
<div>
<Paper style={style} zDepth={3}>
<div style={{textAlign:'center'}}>
<label> Upload ID : <RaisedButton style={{marginLeft: '20px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label>
<br/>
<br/>
<br/>
<label> Upload Picture : <RaisedButton style={{marginLeft: '30px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label>
<img src={this.state.file.preview} />
<br/>
<br/>
<br/>
<label> Upload Logo : <RaisedButton style={{marginLeft: '45px'}}label="Upload" primary={true} onClick={() => { dropzoneRef.open() }}/></label>
</div>
<button type="button" onClick={this.submitFile} />
<Dropzone ref={(node) => { dropzoneRef = node; }} onDrop={ (files) => this.onDrop(files) } style={{display:'none'}}/>
</Paper>
</div>
);
}
}