Блог

Мое приложение react и node находятся в разных каталогах, я хочу загрузить изображение в react, отправить его на серверную часть через запрос axios, а в node получить это изображение, затем переименовать его в текущую дату и время и, наконец, сохранить его в текущем каталоге серверной части, если изображение сохранено успешно, затем верните егово внешний интерфейс через серверную часть узла и отображение изображения в react.

Это то, что я пытался достичь своей желаемой цели.

Форма

 <div className="form-group">
                <label htmlFor="exampleFormControlFile1">
                  Example file input
                </label>
                <input
                  type="file"
                  className="form-control-file"
                  id="exampleFormControlFile1"
                  onChange={this.fileSelectedhandler}
                />
              <button onClick = {this.onSubmit}> Upload</button> 
 </div>
  

Вызов функции со стрелкой при нажатии на отправить

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

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

     const { fileName, filePath, file } = res.data;

      //setUploadedFile({ fileName, filePath });

      //setMessage('File Uploaded');
      console.log(fileName, filePath, file);
      this.setState({ imagesHello : res.data});
      
    } catch (err) {
      if (err.response.status === 500) {
      
        console.log("There was a problem with the server");
      }
    }
  };
  

Серверный API

 //route for uploading image(optional)
app.post("/upload", (req, res) => {
  if (req.files === null) {
    return res.status(200).json({ msg: "No File Uploaded" });
  }

  const file = req.files.file;
  let ts = Date.now();

  let date_ob = new Date(ts);
  let date = date_ob.getDate();
  let month = date_ob.getMonth()   1;
  let year = date_ob.getFullYear();

  // prints date amp; time in YYYY-MM-DD format
  const newFile = `${year}   "-"   ${month}   "-"   ${date}`;

  file.mv(`${__dirname}/uploads/${file.name}`, (err) => {
    if (err) {
      console.log(err);
    } else {
      res.json({
        fileName: file.name,
        filePath: `/uploads/${file.name}`,
        file: req.files.file,
      });
    }
  });
});
  

Проблема с этим кодом заключается в том, что файл сохраняется во внутреннем каталоге, но не возвращается во внешний интерфейс. теперь я хочу отправить это сохраненное изображение обратно во внешний интерфейс react и отобразить его в ответ на приведенный выше /upload запрос post.

Любая помощь будет очень признательна.

Если вы хотите получить сообщение на интерфейсе, что данные успешно сохранены…. вы можете вернуть некоторый ответ из серверной части, и во время выборки, получая ответ без ошибок, вы можете поджарить сообщение (Materializecss Toast)

  M.toast({html:"uploaded", classes:"#6a1b9a purple"})