url 如何在 React 中获取上传的图片？

Question

我想为我的用户实现上传文件。我在我的反应项目中使用 CKEDITOR 5。 nodeJS 后端。所以，我可以上传文件，可以获取它 Url，但是，无法在 VIEW 页面中显示。

//my server code

const express = require('express');

//for uploading i use this module
const multiparty = require('connect-multiparty');
const multipartyMiddleware = multiparty({uploadDir: '/var/www/group0384.ru/public_html/server/uploads'}) //here is whole path to my upload folder on server

const app = express();
const port = 3555;
const path = require('path');
const moment = require('moment');
const fs = require('fs');


//so, here i have route /upload, which is indicated in configuration of ckeditor as route to send pictures
app.use(express.static("uploaded"));
app.post('/upload', multipartyMiddleware, (req, res) => {
  var TempFile = req.files.upload;
  var TempPathfile = TempFile.path;

  const targetPathUrl = path.join(__dirname,"./uploaded/"+TempFile.name);

 if(path.extname(TempFile.originalFilename).toLowerCase() === ".png" || ".jpg"){
   
  fs.rename(TempPathfile, targetPathUrl, err =>{

      res.status(200).json({
       uploaded: true,
        url: `${__dirname}/uploaded/${TempFile.originalFilename}`
      }); // this path is the same as in 5th row (except folder, here it change, but it's no matter) 

      if(err) return console.log(err);
  })
 }

})


//------------CKEDITOR CODE---//
        <CKEditor
            editor={ClassicEditor}
            data={this.state.data}
            onChange={(event, editor) => {
              this.setState({
                data: editor.getData(),
              });
            }}
            config={
              {
                ckfinder: {
                  uploadUrl: '/upload'
                } // here, /upload - the route to send pictures
              }
            }
          />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在我的 VIEW 页面上，我得到了这个

screenshot

所以，我试过换路径，还是拍不到照片

请解释为什么我不能只获取并输出一个已经上传到我自己的服务器上的文件

P.S。对不起我的英语

Answer 1

从屏幕截图看来，您正在获取图像的绝对路径，如果您想在客户端显示图像并且您确定图像保存在您的服务器上，则必须发送它作为图像的 public URL 地址返回 !

示例：“http://example.com/images/image1.png”

Answer 2

谢谢大家的解答，我解决了问题

在这部分我更改了url上传的图片

res.status(200).json({
       uploaded: true,
        url: `/files/${TempFile.originalFilename}`
      });

然后，我用这个 url

创建了路线

app.get('/files/:url(*)', (req, res) => {
  console.log(req.params.url)
  res.sendFile(path.resolve(__dirname + '/uploaded/' + req.params.url))
})

而且有效！

url 如何在 React 中获取上传的图片？

How to get uploaded image in react by url?

file-upload

nginx

node.js

reactjs