从 REST API 返回的图像始终显示损坏

2024-04-21

我正在使用 React 为艺术作品集应用程序构建内容管理系统。客户端将 POST 到使用 Mongoose 插入 MongoDB 的 API。然后,API 在数据库中查询新插入的图像,并将其返回给客户端。

这是我使用 Mongoose 连接到 MongoDB 的代码:

mongoose.connect('mongodb://localhost/test').then(() => 
console.log('connected to db')).catch(err => console.log(err))

mongoose.Promise = global.Promise

const db = mongoose.connection

db.on('error', console.error.bind(console, 'MongoDB connection error:'))

const Schema = mongoose.Schema;

const ImgSchema = new Schema({
  img: { data: Buffer, contentType: String }
})

const Img = mongoose.model('Img', ImgSchema)

我正在使用 multer 和 fs 来处理图像文件。我的 POST 端点如下所示:

router.post('/', upload.single('image'), (req, res) => {
  if (!req.file) {
    res.send('no file')
  } else {
    const imgItem = new Img()
    imgItem.img.data = fs.readFileSync(req.file.path)
    imgItem.contentType = 'image/png'
    imgItem
      .save()
      .then(data => 
        Img.findById(data, (err, findImg) => {
          console.log(findImg.img)
          fs.writeFileSync('api/uploads/image.png', findImg.img.data)
          res.sendFile(__dirname + '/uploads/image.png')
        }))
  } 
})

我可以在文件结构中看到 writeFileSync 正在将图像写入磁盘。 res.sendFile 抓取它并将其发送到客户端。

客户端代码如下所示:

handleSubmit = e => {
    e.preventDefault()
    const img = new FormData()
    img.append('image', this.state.file, this.state.file.name)
    axios
      .post('http://localhost:8000/api/gallery', img, {
        onUploadProgress: progressEvent => {
          console.log(progressEvent.loaded / progressEvent.total)
        }
      })
      .then(res => {
        console.log('responsed')
        console.log(res)
        const returnedFile = new File([res.data], 'image.png', { type: 'image/png' })
        const reader = new FileReader()
        reader.onloadend = () => {
          this.setState({ returnedFile, returned: reader.result })
        }
        reader.readAsDataURL(returnedFile)
      })
      .catch(err => console.log(err))
  }

这确实成功地将返回的文件和 img 数据 url 置于状态。然而,在我的应用程序中,图像总是显示损坏。

这是一些屏幕截图:

如何解决这个问题?


避免发回 Base64 编码的图像(多个图像 + 大文件 + 大编码字符串 = 性能非常慢)。我强烈建议创建一个仅处理图像上传和任何其他图像相关的获取/发布/放置/删除请求的微服务。将其与主应用程序分开。

例如:

  • 我使用 multer 创建图像缓冲区
  • 然后使用 Sharp 或 fs 保存图像(取决于文件类型)
  • 然后我将文件路径发送到我的控制器以保存到我的数据库中
  • 然后,前端在尝试访问时会发出 GET 请求:http://localhost:4000/uploads/timestamp-randomstring-originalname.fileext

简单来说,我的微服务就像一个专门用于图像的 CDN。


例如,用户发送一个post请求到http://localhost:4000/api/avatar/create一些 FormData:

它首先经过一些 Express 中间件:

库/middlewares.js

...
app.use(cors({credentials: true, origin: "http://localhost:3000" })) // allows receiving of cookies from front-end

app.use(morgan(`tiny`)); // logging framework

app.use(multer({
        limits: {
            fileSize: 10240000,
            files: 1,
            fields: 1
        },
        fileFilter: (req, file, next) => {
            if (!/\.(jpe?g|png|gif|bmp)$/i.test(file.originalname)) {
                req.err = `That file extension is not accepted!`
                next(null, false)
            }
            next(null, true);
        }
    }).single(`file`))

app.use(bodyParser.json()); // parses header requests (req.body)

app.use(bodyParser.urlencoded({ limit: `10mb`, extended: true })); // allows objects and arrays to be URL-encoded

...etc     

然后,点击avatars route:

路线/avatars.js

app.post(`/api/avatar/create`, requireAuth, saveImage, create);

然后它通过一些用户身份验证,然后通过我的saveImage中间件:

服务/saveImage.js

const createRandomString = require('../shared/helpers');
const fs = require("fs");
const sharp = require("sharp");
const randomString = createRandomString();

if (req.err || !req.file) {
  return res.status(500).json({ err: req.err || `Unable to locate the requested file to be saved` })
  next();
}

const filename = `${Date.now()}-${randomString}-${req.file.originalname}`;
const filepath = `uploads/${filename}`;

const setFilePath = () => { req.file.path = filepath; return next();}

(/\.(gif|bmp)$/i.test(req.file.originalname))
    ? fs.writeFile(filepath, req.file.buffer, (err) => {
            if (err) { 
              return res.status(500).json({ err: `There was a problem saving the image.`}); 
              next();
            }

            setFilePath();
        })
    : sharp(req.file.buffer).resize(256, 256).max().withoutEnlargement().toFile(filepath).then(() => setFilePath())

如果文件已保存,则会发送一个req.file.path to my create控制器。这将作为文件路径和图像路径保存到我的数据库中(avatarFilePath or /uploads/imagefile.ext保存用于删除目的,并且avatarURL or [http://localhost:4000]/uploads/imagefile.ext保存并用于前端GET请求):

控制器/avatars.js(我使用的是 Postgres,但你可以用 Mongo 代替)

create: async (req, res, done) => {
            try {
                const avatarurl = `${apiURL}/${req.file.path}`;

                await db.result("INSERT INTO avatars(userid, avatarURL, avatarFilePath) VALUES ($1, $2, $3)", [req.session.id, avatarurl, req.file.path]);

                res.status(201).json({ avatarurl });
            } catch (err) { return res.status(500).json({ err: err.toString() }); done(); 
        }

然后当前端尝试访问uploads文件夹通过<img src={avatarURL} alt="image" /> or <img src="[http://localhost:4000]/uploads/imagefile.ext" alt="image" />,它由微服务提供:

库/server.js

const express = require("express");
const path = app.get("path");
const PORT = 4000;

//============================================================//
// EXPRESS SERVE AVATAR IMAGES
//============================================================//
app.use(`/uploads`, express.static(`uploads`));

//============================================================//
/* CREATE EXPRESS SERVER */
//============================================================//
app.listen(PORT);

记录请求时的样子:

19:17:54 INSERT INTO avatars(userid, avatarURL, avatarFilePath) VALUES ('08861626-b6d0-11e8-9047-672b670fe126', 'http://localhost:4000/uploads/1536891474536-k9c7OdimjEWYXbjTIs9J4S3lh2ldrzV8-android.png', 'uploads/1536891474536-k9c7OdimjEWYXbjTIs9J4S3lh2ldrzV8-android.png')

POST /api/avatar/create 201 109 - 61.614 ms

GET /uploads/1536891474536-k9c7OdimjEWYXbjTIs9J4S3lh2ldrzV8-android.png 200 3027 - 3.877 ms

用户在成功 GET 请求后看到的内容:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 REST API 返回的图像始终显示损坏 的相关文章

  • React-Redux:绑定按键操作以启动减速器序列的规范方法是什么?

    这是一个关于react redux的新手问题 我花了几个小时四处搜寻才发现 所以我发布了这个问题 然后为后代回答 也可能是代码审查 我正在使用 React Redux 创建一个游戏 我想使用 WASD 键在小地图上移动角色 这只是更大努力的
  • 如何使用 React 制作垂直选项卡

    有人可以为我提供一种使用 React 创建垂直选项卡的方法吗 我尝试了各种npm包 如react web tabs reactstrap和react bootstrap 最后两个只有水平选项卡的示例 React web tabs在其文档中有
  • 猫鼬的深层填充

    我有两个模式 一张用于用户 另一张用于帖子 在用户模式中 我有latestPost的一个属性 它是帖子模式中条目的ObjectId 当我加载用户对象时 我想将 lastestPost 作为对象获取 其中包含用户架构中作者的用户名 其中作者是
  • CoreMongooseArray 到普通数组

    我正在从一个架构中选出 2 个元素 并希望在另一个架构中进行更新 为此 我使用切片方法将数组中的前 2 个元素列入候选名单 但我越来越 CoreMongooseArray 元素1 元素2 而不是 元素1 元素2 如何删除 CoreMongo
  • React Router 总是将我重定向到不同的 url

    我是 React 和 React Router 的新手 我正在使用 React Router v4 并遵循基于以前版本的教程 但我让它工作了 使用在 SO 上找到的一些东西和 React Router v4 文档上的一些东西 但有一件事困扰
  • 调用axios成功后如何更新页面?反应

    所以我正在做一个使用的项目Axios with Json server 但我有一个问题 每次我做Patch 我必须在主页上按 F5 才能更新 我想知道如何才能做到这一点 这样它就不会自动发生 My Patch onSubmitDate ev
  • mongo objectid“包含”查询

    我想查询 MongoDB 数据库中的集合以查找包含部分 ObjectID 的所有记录 对于普通字符串 我可以使用如下正则表达式 db teams find some string 51eed 但是我该如何对 ObjectID 执行类似的操作
  • 更新插入 MongoDB 时如何防止出现“_t”字段?

    我有一个应用程序 它使用 MongoDB 的 C 驱动程序将 Upsert 插入 MongoDB 数据库 当我打电话给Update函数 我无法指定我要更新的类型 然后 t字段插入元素的类型 这是我用来更新插入的代码 collection U
  • mongorestore 从独立到复制集

    我已转储在默认端口上运行的独立 mongo 数据库 14Gb 大 如下所示 mongodump username
  • 玩笑错误 TypeError: (0 , _jest.test) 不是函数

    我收到错误 类型错误 0 jest test 不是一个函数 当尝试使用时npm test 我认为这可能与配置有关 我该如何解决这个问题 File sum js function sum a b return a b export defau
  • MongoDB:连接到 MongoDB 的 resolv.conf 的 DNS 问题

    我想从 MongoDB Atlas 导出一些数据 如果我执行下面的命令 它会尝试连接localhost并导出数据 mongoexport uri mongodb srv
  • Node.js 重用 MongoDB 参考

    我无法理解 Node js 例如 MongoDB 访问 这是我得到的 mydb js var mongodb require mongodb server new mongodb Server staff mongohq com 10030
  • Mongodb聚合数组大小大于匹配项[重复]

    这个问题在这里已经有答案了 我有一个集合 其中投资是 mongodb 文档内的一个数组 现在使用聚合 我尝试过滤投资长度超过 5 倍的结果 然后使用匹配查询进行下一步处理 Collection id 000000 investments h
  • 使用相同的 props 来反应备忘录重新渲染?

    有一个相当简单的功能组件 如果给出相同的道具 我想阻止它被重新渲染 下面是网上找的 貌似不行 知道我应该做什么吗 就我而言 props 由一组对象组成 其中一些也是嵌套对象 这也许是一个线索 export const DataTable R
  • Material UI 组件中的媒体查询

    我在 React js 项目中使用 Material UI 组件 出于某种原因 我需要对某些组件进行自定义 以使其根据屏幕宽度进行响应 我已经添加了media query并将其作为组件中的样式属性传递 但不起作用 知道吗 我正在使用这样的代
  • Typescript:如何从react-bootstrap导入特定组件

    早些时候我的应用程序位于ReactJs React bootstrap 现在我正在使用Typescript ReactJs React bootstrap 为了减少生产应用程序的大小 之前我曾经使用 导入react bootstrap组件i
  • 哪种反应钩子与 firestore onsnapshot 一起使用?

    我在我的 React Native 应用程序中使用了大量的 Firestore 快照 我也在使用 React hooks 代码看起来像这样 useEffect gt someFirestoreAPICall onSnapshot snaps
  • 向 ReduxReducer 添加回调

    是否有任何错误 反模式 就 React Redux 中的思考 中添加了一个回调action data转化为行动 reducer ACTION FOR REDUCER var x 123 if action data callback act
  • Mongoose 查找 array.length 大于 0 的所有文档并对数据进行排序

    我正在使用 mongoose 对 MongoDB 执行 CRUD 操作 这就是我的架构的样子 var EmployeeSchema new Schema name String description type String default
  • 运行故事书时出错 - sh: 1: start-storybook: 未找到

    我运行时遇到错误故事书 即使是干净的安装 npm run storybook gt storybook media programmersedge New Volume devs demostorybook gt start storybo

随机推荐