- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的应用程序中有一个我正在使用的功能,它允许我提交一个包含图像的表单,然后使用 Multer 将图像存储在一个文件中,并将一个 URL 上传到我的 Postgres 数据库。当我将文件返回到前端时,我只剩下与图像相关的文件名,但我不知道如何添加文件路径以便显示图像。
插入数据库时是否应该添加前缀文件路径?或者如果我在前端显示完整的文件路径是否存在安全问题。显然我知道我的前后端应该解耦并独立运行。我也可以在后端之外为图像创建一个单独的文件,但我不确定这是否是推荐的过程。如果这是在专业环境中,它只会由 Google Cloud、AWS 等处理,所以我不确定在这种情况下是否完全可以遵循解耦过程。
我在一些类似的案例中看到过 process-cwd,但我不确定这是否是我需要做的。我可以在前端React组件中硬编码文件路径,然后使用最后有文件名的redux数据吗?
我的照片文件名存储在我的 Redux 商店中,但我不知道从那里去。该图像当时在我的后端/ Assets 文件中。
将图像插入 Postgres 的 API。
exports.createDiveSpot = async (req, res) => {
const fileNameWithExtension = `${req.file.filename}-${req.file.originalname}`
const newPath = `./assets/diveSpot/${fileNameWithExtension}`
fs.rename(req.file.path, newPath, function (err) {
if (err) {
console.log(err)
res.send(500)
}
console.log(req.body)
diveSpot.create({
diveLocation: req.body.diveLocation,
diveRegionID: req.body.diveRegionID,
diveSpotTypeID: req.body.diveSpotTypeID,
diveSpotDescription: req.body.diveSpotDescription,
photos: fileNameWithExtension,
}).then((data) => {
res.send(data)
})
更新
在下面的方法中。我注意到我可以在“const fileNameWithExtension”行中轻松输入文件名。我可以在前端输入公共(public)文件的 url 还是应该在后端使用 express 公开文件。我是否应该将后端的文件再次放入前端,因为从技术上讲它已经从前端提交,然后 multer 会将其移至前端?
我在下面包含了我最新的错误消息。
exports.createArticle = async (req, res) => {
console.log(req.body)
const fileNameWithExtension = "../home/backend/assets/article/"`${req.file.filename}-${req.file.originalname}`
const newPath = `./assets/article/${fileNameWithExtension}`
console.log(req.body)
fs.rename(req.file.path, newPath, function (err) {
if (err) {
console.log(err)
res.send(500)
}
article.create({
articleTitle: req.body.articleTitle,
articleContent: req.body.articleContent,
userID: req.body.userID,
articleTypeID: req.body.articleTypeID,
photos: fileNameWithExtension,
}).then((data) => {
res.send(data)
})
.catch((err) => {
res.status(500).send({
message: err.message || 'Some error occurred while creating the post.',
})
})
}
)}
错误信息
[Error: ENOENT: no such file or directory, rename 'C:\Users\James Greene\WebstormProjects\softwaredevproject\SustainableScuba\backend\assets\article\678c78
193bb73ab287bbb6b644a0c86e' -> 'C:\Users\James Greene\WebstormProjects\softwaredevproject\WebApp\sustainable-scuba-web-app\public\article\678c78193bb73ab28
7bbb6b644a0c86e-sharkfeat.jpg'] {
errno: -4058,
code: 'ENOENT',
syscall: 'rename',
path: '...\\SustainableScuba\\backend\\assets\\article\\678c78193bb73ab287bbb6b644a0c86e',
dest: '...\\sustainable-scuba-web-app\\public\\article\\678c78193bb73ab287bbb6b644a0c86
e-sharkfeat.jpg'
}
express deprecated res.send(status): Use res.sendStatus(status) instead controllers\article.controller.js:15:21
Executing (default): INSERT INTO "articles" ("articleID","articleTitle","articleContent","photos","userID","articleTypeID") VALUES (DEFAULT,$1,$2,$3,$4,$5)
RETURNING *;
Unhandled rejection Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at ServerResponse.setHeader (_http_outgoing.js:485:11)
at ServerResponse.header (...\backend\node_modules\express\lib\response.js:771:1
0)
它在 Redux 的前端呈现并在商店中。我正在尝试在下面的卡片组件上显示图像。
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title={articleList.articleTitle}
subheader={userID}/>
<CardMedia
id="Photos"
className={classes.media}
image={articleList.photos}
title="Dive Photos"/>
<CardContent>
<Typography className="Type" id="Type" variant="body2" color="textSecondary" component="p">
{articleType}
最佳答案
包含后端的完整路径是一种糟糕的安全做法,因为它允许攻击者遍历您的安装并找到漏洞。最好将复杂的应用程序拆分为不同的更简单的职责,以便更容易解决。
这个解决方案应该“分离”后端和前端的关注点,以及上传和下载文件的两个用例:
用例 1:将图像文件上传到服务器。
用例 2:下载并在 UI 上显示匹配文章的图像文件。
因此,您的后端需要以某种方式保存文件,以便它可以发布它供以后使用。评论中提到的最佳做法是将文件放在公共(public)文件夹中并使用名称作为 ID,然后让网络服务器将其视为静态文件。这样可以充分发挥网络和云技术的优势,帮助您加快和维护您的解决方案。
当客户端上传图片时,服务器应将其保存到公共(public)文件夹并返回其名称/ID。上传文件的客户端路径不够,因为服务器无法访问客户端系统。相反,客户端需要在 HTTP 请求中发送带有元数据的字节流。如果您只在上传中设置文件名,则需要像这样读取字节并将其发送到服务器:
JSON 示例:
// read in the file bytes when opened:
onFileOpened(e) {
let data={};
let reader = new FileReader();
reader.onloadend = () => {
data.image= reader.result ;
};
reader.readAsDataURL(event.target.files[0]);
data.id=generateId();
}
// send the bytes on submit:
onSubmit(data){
POST(data);
}
多部分示例:
使用 multer,客户端应该发送一个 Multipart/Form-Data 请求。这是回退到旧的 HTML 技术并像上面一样对字节进行编码。但是,它仍然是包装器中的字节。
<form action="/profile" method="post" enctype="multipart/form-data">
<input type="file" name="avatar" />
</form>
然后,当服务器接收到流并调用 createArticle
方法时,它应该读取字节并将它们保存到共享路径、数据库或内容分发网络 (CDN)。服务器应托管或启用端点以从记录的 ID 中获取相同的文件。然后内容可以通过将文件的 ID/名称附加到图像端点来引用该文件。
不是将文件从客户端路径重命名为目标,而是需要将字节写入磁盘:
fs.createReadStream(req.file).pipe(fs.createWriteStream(newPath ));
这允许将图像托管在多个提供商上,允许您的网络服务器的多个实例并行运行,并允许您独立调整上传和下载服务的大小。
关于node.js - 从 Postgres - Node/React 返回图像 url 到前端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67014950/
问题是,当用户回复彼此的帖子时,我必须这样做: margin-left:40px; 对于 1 级深度 react margin-left:80px; 对于 2 层深等 但是我想让 react div
我试图弄清楚如何将 React Router 与 React VR 连接起来。 首先,我应该使用 react-router dom/native ?目前尚不清楚,因为 React VR 构建在 Rea
我是 React 或一般编码背景的新手。我不确定这些陈述之间有什么区别 import * as react from 'react' 和 import react from 'react' 提前致谢!
我正在使用最新的稳定版本的 react、react-native、react-test-renderer、react-dom。 然而,react-native 依赖于 react@16.0.0-alp
是否 react 原生 应用程序开发可以通过软件架构实现,例如 MVC、MVP、MVVM ? 谢谢你。 最佳答案 是的。 React Native 只是你提到的那些软件设计模式中的“V”。如果你考虑其
您好我正在尝试在我的导航器右按钮中绑定(bind)一个功能, 但它给出了错误。 这是我的代码: import React, { Component } from 'react'; import Ico
我使用react native创建了一个应用程序,我正在尝试生成apk。在http://facebook.github.io/react-native/docs/signed-apk-android.
1 [我尝试将分页的 z-index 更改为 0,但没有成功] 这是我的codesandbox的链接:请检查最后一个选择下拉列表,它位于分页后面。 https://codesandbox.io/s/j
我注意到 React 可以这样导入: import * as React from 'react'; ...或者像这样: import React from 'react'; 第一个导入 react
我是 react-native 的新手。我正在使用 React Native Paper 为所有屏幕提供主题。我也在使用 react 导航堆栈导航器和抽屉导航器。首先,对于导航,论文主题在导航组件中不
我有一个使用 Ignite CLI 创建的 React Native 应用程序.我正在尝试将 TabNavigator 与 React Navigation 结合使用,但我似乎无法弄清楚如何将数据从一
我正在尝试在我的 React 应用程序中进行快照测试。我已经在使用 react-testing-library 进行一般的单元测试。然而,对于快照测试,我在网上看到了不同的方法,要么使用 react-
我正在使用 react-native 构建跨平台 native 应用程序,并使用 react-navigation 在屏幕之间导航和使用 redux 管理导航状态。当我嵌套导航器时会出现问题。 例如,
由于分页和 React Native Navigation,我面临着一种复杂的问题。 单击具有类别列表的抽屉,它们都将转到屏幕 问题陈述: 当我随机点击类别时,一切正常。但是,在分页过程中遇到问题。假
这是我的抽屉导航: const DashboardStack = StackNavigator({ Dashboard: { screen: Dashboard
尝试构建 react-native android 应用程序但出现以下错误 info Running jetifier to migrate libraries to AndroidX. You ca
我目前正在一个应用程序中实现 React Router v.4,我也在其中使用 Webpack 进行捆绑。在我的 webpack 配置中,我将 React、ReactDOM 和 React-route
我正在使用 React.children 渲染一些带有 react router 的子路由(对于某个主路由下的所有子路由。 这对我来说一直很好,但是我之前正在解构传递给 children 的 Prop
当我运行 React 应用程序时,它显示 export 'React'(导入为 'React')在 'react' 中找不到。所有页面错误 see image here . 最佳答案 根据图像中的错误
当我使用这个例子在我的应用程序上实现 Image-slider 时,我遇到了这个错误。 import React,{Component} from 'react' import {View,T
我是一名优秀的程序员,十分优秀!