Почему React. js перезагрузка компонента после загрузки файла? Я использую e.preventDefault ()? - PullRequest
Новая
       53

Почему React. js перезагрузка компонента после загрузки файла? Я использую e.preventDefault ()?

0 голосов
/ 25 марта 2020

Я использую React. js на клиенте и Express. js на сервере. Файл загружается без проблем, но по какой-то причине React. js на секунду отображает компонент успеха сообщения, а затем перезагружается в основной исходный компонент. Эта проблема возникает, когда я пытаюсь загрузить файл .csv, но при загрузке изображения (.png, .jpeg) это работает как чудо.

Я беру код из этого репозитория: https://github.com/bradtraversy/react_file_uploader, с некоторыми изменениями, но в основном это так.

Заранее благодарим за помощь

Fileupload. js 

const FileUpload = () => {
  const [file, setFile] = useState('');
  const [filename, setFilename] = useState('Choose File');
  const [uploadedFile, setUploadedFile] = useState({});
  const [message, setMessage] = useState('');

  const onChange = e => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };

  const onSubmit = async e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    try {
      const res = await axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
      });

      const { fileName} = res.data;

      setUploadedFile({ fileName, filePath });

      setMessage('File Uploaded');
    } catch (err) {
      if (err.response.status === 500) {
        setMessage('There was a problem with the server');
      } else {
        setMessage(err.response.data.msg);
      }
    }
  };

  return (
    <Fragment>
      {message ? <Message msg={message} /> : null}
      <form onSubmit={onSubmit}>
        <div className='custom-file mb-4'>
          <input
            type='file'
            className='custom-file-input'
            id='customFile'
            onChange={onChange}
          />
          <label className='custom-file-label' htmlFor='customFile'>
            {filename}
          </label>
        </div>

        <input
          type='submit'
          value='Upload'
          className='btn btn-primary btn-block mt-4'
        />
      </form>
      {uploadedFile ? (
        <div className='row mt-5'>
          <div className='col-md-6 m-auto'>
            <h3 className='text-center'>{uploadedFile.fileName}</h3>
          </div>
        </div>
      ) : null}
    </Fragment>
  );
};

сервер. js

app.post('/upload', (req, res) => {

    if (req.files === null) {
        return res.status(400).json({ msg: 'No file uploaded' });
    }

    const file = req.files.file;

    file.mv(`${__dirname}/client/public/uploads/${file.name}`, err => {

        if (err) {
            console.error(err);
            return res.status(500).send(err)
        }
        res.json({ fileName: file.name, filePath: `/uploads/${file.name}` });
        //console.log("upload y empieza la logica")
        //res.send(myLogic.mySpecialFunction());
    })
});
...