如何在reactjs中显示选中的图像

Question

我想上传图片并显示选中的图片，选择后如何显示图片这是我的代码，帮助我显示图像，我做了发布图像的功能，我可以一键发布多个图像，但我不能在上传前显示图像预览，我尝试使用文件阅读器，但无法显示和上传。

const [pImg, setPImg] = useState([]);
const [images, setImages] = useState([]);

const addImg = (ImagesPostDto) => {
const data2 = new FormData();
[...ImagesPostDto].forEach((Images) => {
data2.append("ImagesPostDto", Images);
});
Axios.post(`/shop/${shopID}/Product/${pID}/Images`, data2)
.then((res) => {
if (res.status === 200) {
setMessage({
data: `${res.data.MESSAGE}`,
type: "alert-success",
});
onShowAlert();
}
})
.catch((err) => {
setMessage({
data: `${err.response.data.MESSAGE}`,
type: "alert-danger",
});
setLoading(false);
onShowAlert();
});
};
const handleImageChange = (e) => {
e.preventDefault();
const ProductImg = e.target.files;
setPImg(ProductImg);
const reader = new FileReader();
reader.onloadend = () => {
setPImg(ProductImg);
setImages(reader.result);
};
reader.readAsDataURL(ProductImg);
};
const handleProductSubmit = (event) => {
event.preventDefault();
addImg(pImg);
};

return (
<div>


<Form>
<p>
<Label htmlFor="file">Upload images</Label>
<input
type="file"
id="file"
onChange={handleImageChange}
accept="image/png, image/jpg, image/jpeg"
multiple
/>
</p>
</Form>
<div className="">
{/* {images.length > 0 ? (
<div>
{images.map((image) => (
<p>
<img src={images} alt="" />
</p>
))}
</div>
) : null} */}
</div>

Answer 1

如果你想渲染图像，那么从文件数组中创建ObjectURL并设置图像状态，那么它应该可以正常工作。我已经注释了与API调用相关的代码，以便我们可以专注于渲染所选图像。你可以简单地复制这段代码并粘贴到CodeSandBox中，它应该可以正常工作。这里是你的代码稍微修改:

import "./styles.css";
import { useState } from "react";
export default function App() {
const [pImg, setPImg] = useState([]);
const [images, setImages] = useState([]);
// const addImg = (ImagesPostDto) => {
//   const data2 = new FormData();
//   [...ImagesPostDto].forEach((Images) => {
//     data2.append("ImagesPostDto", Images);
//   });
//   Axios.post(`/shop/${shopID}/Product/${pID}/Images`, data2)
//     .then((res) => {
//       if (res.status === 200) {
//         setMessage({
//           data: `${res.data.MESSAGE}`,
//           type: "alert-success"
//         });
//         onShowAlert();
//       }
//     })
//     .catch((err) => {
//       setMessage({
//         data: `${err.response.data.MESSAGE}`,
//         type: "alert-danger"
//       });
//       setLoading(false);
//       onShowAlert();
//     });
// };
const handleImageChange = (e) => {
e.preventDefault();
console.log("event", e);
const ProductImg = [...e.target.files];
const images = ProductImg.map((image) => URL.createObjectURL(image));
console.log("images", images);
setImages(images);
};
// const handleProductSubmit = (event) => {
//   event.preventDefault();
//   addImg(pImg);
// };
return (
<div>
<form>
<p>
<label htmlFor="file">Upload images</label>
<input
type="file"
id="file"
onChange={handleImageChange}
accept="image/png, image/jpg, image/jpeg"
multiple
/>
</p>
</form>
<div className="">
{images.length > 0 && (
<div>
{images.map((image, index) => (
<p key={index}>
<img src={image} alt="" />
</p>
))}
</div>
)}
</div>
</div>
);
}

Answer 2

您需要从GET API中获取图像并在setImages中设置响应，而不是现在显示的图像变量为空数组。

Answer 3

据我所知，您需要在选择或上传后预览图像。

你能做的是，无论何时你在准备FormData或在更改事件的时候，你可以将每个选定文件的ObjectURL存储在另一个状态，并且可以很容易地通过state显示这些图像。