- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 CRUD React 应用程序,您可以在其中创建文章。有“标题”、“内容”和“图像”。
我在 Cloud Firestore 中有一个名为“文章”的集合。这些文档具有以下字段:“标题”和“内容”,因此每次我在我的 react 应用程序中创建文章时,都会创建一个新文档。
下一步是能够将图像添加到文章中。
我设法连接到 Firebase 并将图像从我的 React 页面上传到 Firebase 存储。但是,我如何将图像连接到他们的文章?比如,如何在 Cloud Firestore 和 Storage 之间建立连接?
我是否在我的文档中创建了一个名为“图像”的额外字段?但是那我该如何引用呢?
我也想尽量避免重复。
UploadImage.js
import React, { useState, Component } from "react";
import { storage } from "../Firebase";
function UploadFile() {
const [image, setImage] = useState(null);
const [url, setUrl] = useState("");
const [progress, setProgress] = useState(0);
const handleChange = e => {
if (e.target.files[0]) {
setImage(e.target.files[0]);
}
};
const handleUpload = () => {
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
"state_changed",
snapshot => {
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(progress);
},
error => {
console.log(error);
},
() => {
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then(url => {
setUrl(url);
});
}
);
};
console.log("image: ", image);
return (
<div>
<progress value={progress} max="100" />
<br />
<br />
<input type="file" onChange={handleChange} />
<button onClick={handleUpload}>Upload</button>
<br />
{url}
<br />
<img src={url || "http://via.placeholder.com/300"} alt="firebase-image" />
</div>
);
}
export default UploadFile;
这是我的“添加文章”表格-->
AddArticle.js
import React, { Component } from 'react';
import firebase from '../Firebase';
import UploadFile from '../components/UploadFile';
class AddArticle extends Component {
constructor() {
super();
this.ref = firebase.firestore().collection('articles');
this.state = {
title: '',
content: ''
};
}
onChange = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state);
}
onSubmit = (e) => {
e.preventDefault();
const { title, content } = this.state;
this.ref.add({
title,
content
}).then((docRef) => {
this.setState({
title: '',
content: ''
});
this.props.history.push("/")
})
.catch((error) => {
console.error("Error adding document: ", error);
});
}
render() {
const { title, content } = this.state;
return (
<div className="container">
<br></br><br></br><br></br>
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title text-center">
Create a new article
</h3>
</div>
<br></br><br></br>
<div className="panel-body">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label for="title">Title:</label>
<input type="text" className="form-control" name="title" value={title} onChange={this.onChange} placeholder="Title" />
</div>
<div className="form-group">
<label for="content">Content:</label>
<textArea className="form-control" name="content" onChange={this.onChange} placeholder="Content" cols="80" rows="20">{content}</textArea>
</div>
<UploadFile />
<button type="submit" className="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
);
}
}
export default AddArticle;
最佳答案
这实际上很简单,要实现这一点,请按照以下步骤操作:
关于javascript - 如何将 Firebase Storage 与 Cloud Firestore 连接,以便我的图片与各自的帖子相关联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63401193/
我想从我的 Android 应用程序发布帖子并插入到我的数据库中。我的第一个方法是从我的应用程序发送帖子并仅显示值,但它不起作用。 我的应用程序代码是 public void postData() {
我在谷歌上进行了长时间的搜索,试图找到解决这个问题的方法...我正在创建一个 cv 管理器主题,使用 WordPress 安装来控制内容。我已经设法按类别组织所有 WP 帖子,但也想在年份分组中列出这
获取数据:{ error: 'invalid_request', error_description: 'Missing grant type' } } Content-Type 是正确的,不知道哪里
我试图访问我的路由“posts.js”,但是当我启动服务器并连接到 localhost:5000/posts 时。此错误显示为“无法获取/发布” 代码:服务器/路由/posts.js import e
是否有任何可能的方法可以按标题对新的 WordPress 帖子查询进行排序,但按数字而不是按字母顺序排序? 我有一些标题,它们按字母顺序有很多相同的名称,然后有一个数字后记,所以当然,例如 Wordp
我有一个 WCF RESTFul 服务,声明如下: [ServiceContract] public interface IGasPriceService { [OperationContra
我希望创建一个网站,允许用户创建群组,然后在这些群组内聊天/发帖。但是,当在组内发帖/聊天时,我不希望用户必须重新加载页面才能查看该组内的这些新帖子/聊天。我的问题归结为:您对如何做到这一点(语言、网
我们有一个 Android 应用程序,通过无状态 JSON 协议(protocol)与 php/MySQL 服务器通信。 用户已登录应用并拥有相应的用户 ID。 应用根据请求从服务器接收项目/帖子列表
我正在尝试找出帖子、评论和对评论的回复的架构,其中回复只有单级(没有回复回复)。 帖子: 1) id 2) user_id 3) contents 4) privacy 评论: 1) id 2) us
我正在使用 YITH Woocommerce 订阅的免费版本,让我的 Wordpress 网站的用户能够在订阅的基础上购买产品。当用户购买订阅时,会发生几件事。为订单创建了一个新帖子,为订单创建了一个
在我之前的项目中,我将帖子和评论作为两个表: 发布 编号 正文 时间戳 用户名 评论 编号 留言 时间戳 用户名 zip 现在我必须设计对评论的回复。回复只有一级,所以用户只能回复评论,不能回复。树结
在不添加任何标签或类别的情况下,我需要一种方法来生成一个页面,该页面列出所有包含单词的 Wordpress 帖子,例如,其中某处包含“设计”。有谁知道如何做到这一点? 最佳答案 您可以使用 WP_Qu
我正在使用 $routeProvider 设置一条类似 的路线 when('/grab/:param1/:param2', { controller: 'someController',
我正在尝试使用 K6 加载测试 prometheus pushgateway,它需要以下格式的帖子。 http_request_duration_seconds_bucket{le="0.05"} 2
在 DART lang 中,如何指定 POST 请求 Content-Type 为 multipart/form-data 我的 DART 代码是: sendDatas(dynamic data) {
我有一个功能可以在 2014-11-01 和 2015-10-31 之间抓取比特币 subreddit 中的所有帖子。 但是,我只能提取到 10 月 25 日为止的大约 990 个帖子。我不明白发生了
如何遍历 Jekyll 站点帖子,但仅对年份等于特定值的帖子采取行动? {% for post in site.posts %} {% if post.date.year == 2012 %}
我想在一个页面上显示所有 Wordpress 帖子,并让结果显示如下示例: 9 月(当月)的帖子 1- 第一篇文章2-秒发帖3- 第三个帖子 下个月的帖子 2- 第一篇文章2-秒发帖3- 第三个帖子
Recent posts {% for post in site.posts %} » {{ post.title }} {% endfor %}
我想在 WordPress 的页面中显示所有最近的 WordPress 帖子。我尝试了一些插件,但运气不佳。我只想显示最后 10 篇帖子的标题和摘录。有人能指出我正确的方向吗? 感谢任何帮助。 谢谢,
我是一名优秀的程序员,十分优秀!