javascript - 添加多张图片预览和删除 React
问题描述
我有一个代码,我只上传 1 张图像并显示它,但我需要上传最多 5 张图像并能够删除它们,我不知道如何才能上传更多图像并能够显示它们在 img 标签中
这将是我的代码,我只能上传一张图片并显示它
import React, { useState } from "react";
import "./styles.css";
const SingleImageUploadComponent = () => {
const [file, setFile] = useState(null);
function uploadSingleFile(e) {
setFile(URL.createObjectURL(e.target.files[0]));
console.log("file", file);
}
function upload(e) {
e.preventDefault();
console.log(file);
}
return (
<form>
<div className="form-group preview">
{file && <img src={file} alt="" />}
</div>
<div className="form-group">
<input
type="file"
className="form-control"
onChange={uploadSingleFile}
/>
</div>
<button
type="button"
className="btn btn-primary btn-block"
onClick={upload}
>
Upload
</button>
</form>
);
};
export default SingleImageUploadComponent;
正如我之前提到的,我需要上传最多 5 张图片并在 5 个 img 标签中显示它们,因为它们有我向它们展示的地方,它们有 css 样式
如果有人可以帮助我,那就太好了,非常感谢
解决方案
您可以将文件存储在数组中而不是单个文件中并使用它。
import React, { useState } from "react";
import "./styles.css";
const App = () => {
const [file, setFile] = useState([]);
function uploadSingleFile(e) {
setFile([...file, URL.createObjectURL(e.target.files[0])]);
console.log("file", file);
}
function upload(e) {
e.preventDefault();
console.log(file);
}
function deleteFile(e) {
const s = file.filter((item, index) => index !== e);
setFile(s);
console.log(s);
}
return (
<form>
<div className="form-group preview">
{file.length > 0 &&
file.map((item, index) => {
return (
<div key={item}>
<img src={item} alt="" />
<button type="button" onClick={() => deleteFile(index)}>
delete
</button>
</div>
);
})}
</div>
<div className="form-group">
<input
type="file"
disabled={file.length === 5}
className="form-control"
onChange={uploadSingleFile}
/>
</div>
<button
type="button"
className="btn btn-primary btn-block"
onClick={upload}
>
Upload
</button>
</form>
);
};
export default App;
推荐阅读
- mysql - 使用日期字符串作为参数的 sql 查询不起作用
- python-3.x - 在 Windows 64x 机器上从源代码构建 numba
- python - 自动化我的 Python 脚本以从 API 请求中添加下个月的值
- express - 将值传递给 EJS
- android - 获取调试 apk (Android) 的 SHA-256 证书校验和
- javascript - 如何创建包含多个图像的文件夹并将其下载为 zip 文件 - Javascript?
- docker - 在 Docker 容器内为 Pyspark 测试用例运行测试覆盖
- java - 如何解决 bean 创建期间的 Unexpected 异常;嵌套异常是 java.lang.IllegalStateException: Method has too many Body parameters
- android - 无法在 android 10/11 中从 Android 服务器打开其他应用程序
- r - 如何从光栅化的“SpatialPolygonsDataFrame”中获取单元格尺寸?