Question

我设法在React JS中上传文件并将其存储在NodeJS公用文件夹中，我也将它们存储在数据库中（只是文件名）

我现在想做的就是上传文件，如何从服务器（或数据库或两者）中获取文件。

我在前端的上传功能如下：

    onSubmit = (event) => {
      //some security here so i make sure that the upload is an valid image 
      //I am uploading Ads for my page
      const data=new FormData();
      data.append('adimage',adimage);
      data.append('adurl',adurl);

      fetch('http://localhost:3001/uploadad',{
          method:'POST',
          body:data,
      }).then((response)=>{
          response.json().then(ad=>{
              let ads=this.state.ads;
              ads=[...ads,ad.file];
              this.setState({ads:ads});
          }) 
              .catch(err=>console.log('failed to upload image'));
      }).catch(err=>console.log('error uploading image'));

还有NodeJS后端：

const uploadAd= (req,res,db,urlExists)=>{
//some security here so i make sure that the upload is an valid image
db('ads')
    .insert({
        image: ad.name,
        url: adurl
    })
    .returning('id')
    .then(id => {
        db('ads').update({
            image: `ad${id[0]}.${ext}`
        })
         //just want to store all ad images as ad{adid}
            .where('id', '=', id[0])
            .returning(['image', 'url'])
            .then(data => {
                let img = data[0].image;
                let url = data[0].url;

                const reqPath = path.join(__dirname, '..\\..\\');
                //uploading the file to the public folder
                ad.mv(`${reqPath}/public/${img}`, (err) =>{
                    if (err) {
                        return res.status(500).send(err);
                    }
                    res.json({
                        file: `${img}`,
                        url: url
                    });
                });
            }).catch(err => console.log(err));
    }).catch(err => console.log(err));
};

现在我的文件存储在服务器端的文件夹中了，如何在客户端获取数据？

我可以将它们存储在数据库中而无需上传文件吗？但是，据我了解，这不是一个好习惯吗？我是一个很新的反应者，这是我在这里的第一篇文章。谢谢

将图像从节点JS（或数据库）获取到React JS

0 个答案: