Reactjs如何预览图像并获取图像文件

Question

我在上传之前为预览图像写了这段代码，但问题是我可以预览图像或获取图像文件。我无法同时获得预览图像和上传文件的功能。如果我将return URL.createObjectURL(file);替换为retun file，那么我将获得要上传的文件，但图像预览无法工作。如何使用这两种功能？有什么建议吗？这是我的代码：

export const MultiImageUpload = () => {
const [selectedImages, setSelectedImages] = useState([]);
const onSelectFile = (event) => {
const selectedFiles = event.target.files;
const selectedFilesArray = Array.from(selectedFiles);


const imagesArray = selectedFilesArray.map((file) => {

return URL.createObjectURL(file);
//return file 

});



setSelectedImages((previousImages) => previousImages.concat(imagesArray));


// FOR BUG IN CHROME
event.target.value = "";
};
function deleteHandler(image) {
setSelectedImages(selectedImages.filter((e) => e !== image));
URL.revokeObjectURL(image);
}

Answer 1

你可以同时使用url(base64字符串(和文件(blob(，就像这个

//this will  hold base64 url of images
const [selectedImagesURL, setSelectedImagesURL] = useState([]);
//this will hold file blob
const [selectedImages, setSelectedImages] = useState([]);

现在，您的更改处理程序应该同时更新url和图像数组

const onSelectFile = (event) => {
const selectedFiles = event.target.files;
const selectedFilesArray = Array.from(selectedFiles);
const imagesURLArray = selectedFilesArray.map((file) => {
return URL.createObjectURL(file);
});

setSelectedImages((previousImages) => previousImages.concat(selectedFilesArray));
setSelectedImagesURL((previousImagesURL) => previousImagesURL.concat(imagesURLArray));

// FOR BUG IN CHROME
event.target.value = "";
};

然后使用selectedImagesURL预览图像，使用selectedImages上传图像。

希望这会有所帮助！