首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >图像上传MERN栈

图像上传MERN栈
EN

Stack Overflow用户
提问于 2020-11-12 16:41:20
回答 1查看 1.5K关注 0票数 0

我的react和节点应用程序位于不同的目录上,我想要的是上传图像,通过axios请求将图像发送到后端,然后在节点接收该图像,然后将其重命名为当前日期和时间,最后将其保存到当前后端目录中,如果图像保存成功,则通过节点后端将其返回到前端,并在react上显示图像。

这就是我想要达到的目标。

表单

代码语言:javascript
运行
复制
<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>

单击提交时调用箭头函数

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
//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 & 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,
      });
    }
  });
});

此代码的问题是文件保存到后端目录中,但现在不返回到前端,我想要做的是将保存的图像发送回returning,并响应上面的/upload post请求显示它。

任何帮助都会很感激的。

EN

回答 1

Stack Overflow用户

发布于 2021-04-02 04:56:38

如果您想在前端获得数据保存成功的消息.您可以从后端返回一些响应,在获取响应的过程中没有错误,您可以吐司消息(Materializecss )

代码语言:javascript
运行
复制
 M.toast({html:"uploaded", classes:"#6a1b9a purple"})
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64808019

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档