Как использовать express-fileupload с fetchApi - PullRequest
0 голосов
/ 15 января 2019

Я пытаюсь использовать fetch для загрузки файлов, чтобы я мог подождать, пока элемент завершит обработку, а затем перенаправить пользователя на нужную страницу.

Я использую express-fileupload и успешно загрузил файлы напрямую с помощью встроенной HTML-формы.

Вот то, что я настроил для fetch

Загрузить компонент

class Uploader extends PureComponent {
  async onSubmit(el) {
    el.preventDefault();

    const { currentTarget: target } = el;
    const manpowerUpload = target.querySelector('input');

    //manpowerUpload.files = files[..1 item];

    if(manpowerUpload.files && manpowerUpload.files.length > 0) {
      const fetchData = await fetch('http://localhost:5002/upload/manpower', {
        method: 'POST',
        headers: {
          "Content-Type": "text/csv",
        },
        body: manpowerUpload.files,
      });
    }
    //fetchData = 400 from server 
  }
  render(){
    return (
      <div data-testid="admin.productionAdmin.manpower">
        <form ref='manpowerUpload'
              id='manpowerUpload'
              action='http://localhost:8000/upload'
              method='post'
              encType="multipart/form-data"
              onSubmit={this.onSubmit}
        >
            <input
                accept={props.accept}
                className={classes.input}
                name={props.name}
                id="contained-button-file"
                multiple
                type="file"
           />
          <label htmlFor="contained-button-file">
               <Button variant="contained" component="span" className={classes.button}>
                  <FormattedMessage id={label} />
               </Button>
           </label>
          <Button type="submit" variant="outlined">Submit</Button>
        </form>
      </div>
    );
  }
};

Express

app.post('/upload/manpower', function(req, res) {
  if (!req.files)
    return res.status(400).json({message: 'No files were uploaded.', success: false});
});
...