使用 dropzone react 显示上传预览并停止自动上传

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 属性并将其设置为 img src.

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>
        );
    }
}

使用 dropzone react 显示上传预览并停止自动上传

displaying upload preview and stopping auto upload with dropzone react

javascript

reactjs

react-dropzone