如何通过 url 获取上传的图像？答案

【问题标题】：How to get uploaded image in react by url?如何通过 url 获取上传的图像？
【发布时间】：2021-06-19 02:46:11
【问题描述】：

我想为我的用户实现上传文件。我在我的反应项目中使用 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

所以，我尝试更改路径，但仍然无法获得图片。

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

附：对不起我的英语

【问题讨论】：

标签： node.js reactjs nginx file-upload

【解决方案1】：

从屏幕截图看来，您正在获取图像的绝对路径，如果您想在客户端显示图像并且您确定图像已保存在您的服务器上，则必须将其发送回图片的公共 URL 地址！

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

【讨论】：

【解决方案2】：

谢谢大家的解答，问题已经解决了。

在这部分我更改上传图片的网址

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))
})

而且它有效！

【讨论】：