Gambar membuat proporsi yang signifikan dari data yang dikirimkan di internet. Seringkali, klien harus mengunggah file gambar dari perangkat mereka ke server. Untuk memastikan pengguna mengunggah file gambar dengan jenis, kualitas, dan ukuran yang benar, sebagian besar aplikasi web memiliki fitur untuk melihat pratinjau gambar
Di lingkungan browser, klien dapat memulai pengunggahan gambar dengan menjelajahi file menggunakan elemen input atau API seret dan lepas. Anda kemudian dapat menggunakan URL API atau FileReader API untuk membaca file gambar dan mempratinjaunya
Meskipun mempratinjau gambar dengan API URL sangat mudah, menggunakan API FileReader dapat menjadi hal yang membingungkan. Oleh karena itu, dalam artikel ini, Anda akan mempelajari cara mempratinjau gambar dalam aplikasi React dengan FileReader API. Kami akan membahas pratinjau gambar tunggal dan batch
Isi
Cara menelusuri file gambar di React
Jika Anda ingin menambahkan fungsionalitas pengunggahan file ke aplikasi web Anda, elemen input bertipe
8 sangat berguna. Ini memungkinkan pengguna untuk memilih satu atau beberapa file dari penyimpanan di komputer atau perangkat seluler mereka
_
Elemen input di atas akan terlihat seperti tombol saat dirender oleh browser. Mengkliknya akan membuka dialog pemilih file bawaan sistem operasi. Pengguna kemudian dapat memilih file gambar untuk diunggah
Elemen input memiliki atribut
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
1 untuk membatasi jenis file. Nilainya berupa string yang terdiri dari penentu tipe file yang dipisahkan dengan koma. Nilai atribut
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
1 adalah
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
3 dalam elemen input di atas. Ini memungkinkan kami untuk menelusuri dan mengunggah gambar dalam format apa pun
Untuk mengupload file gambar dengan format tertentu, Anda dapat membatasi nilai atribut
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
1. Misalnya, menyetel nilainya ke
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
_6 atau
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
7 hanya menerima gambar PNG
Dengan atribut boolean
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
_8 disetel ke
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
9, pengguna dapat memilih beberapa file gambar. Di sisi lain, pengguna hanya dapat menelusuri satu file gambar jika nilainya
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
0. Perlu dicatat bahwa nilai atribut boolean adalah
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
9 jika atribut tersebut ada pada elemen, dan
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
0 jika dihilangkan
Browser mengeluarkan peristiwa
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
_3 setelah pengguna menyelesaikan pemilihan file. Oleh karena itu, Anda harus mendengarkan acara
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
3 pada elemen input. Anda dapat melakukannya seperti itu di Bereaksi
Dalam event handler
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
_3, Anda dapat mengakses objek
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
7. Ini adalah iterable yang entri-entrinya adalah
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
8 objek. Objek
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
_8 berisi metadata hanya-baca seperti nama file, jenis, dan ukuran
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
Pengantar API FileReader
FileReader_ API menyediakan antarmuka untuk membaca konten file dari aplikasi web secara asinkron
Seperti yang disorot di bagian sebelumnya, Anda dapat menggunakan elemen input bertipe
8 untuk menelusuri file dari komputer atau perangkat seluler pengguna. Memilih file gambar dengan cara ini mengembalikan objek
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
_7 yang entri-entrinya adalah objek
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
8
API FileReader kemudian menggunakan objek
const fileReader = new FileReader();
fileReader.onchange = (e) => {
const { result } = e.target;
}
fileReader.readAsDataURL(fileObject);
8 untuk membaca file yang telah dipilih pengguna secara asinkron. Perlu disebutkan bahwa Anda tidak dapat menggunakan FileReader API untuk membaca konten file dari sistem file pengguna menggunakan nama jalur file
FileReader_ API memiliki beberapa metode instance asinkron untuk melakukan operasi baca. Cara-cara tersebut antara lain
import { useEffect, useState } from "react";
const imageTypeRegex = /image\/(png|jpg|jpeg)/gm;
function App() {
const [imageFiles, setImageFiles] = useState([]);
const [images, setImages] = useState([]);
const changeHandler = (e) => {
const { files } = e.target;
const validImageFiles = [];
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.type.match(imageTypeRegex)) {
validImageFiles.push(file);
}
}
if (validImageFiles.length) {
setImageFiles(validImageFiles);
return;
}
alert("Selected images are not of valid type!");
};
useEffect(() => {
const images = [], fileReaders = [];
let isCancel = false;
if (imageFiles.length) {
imageFiles.forEach((file) => {
const fileReader = new FileReader();
fileReaders.push(fileReader);
fileReader.onload = (e) => {
const { result } = e.target;
if (result) {
images.push(result)
}
if (images.length === imageFiles.length && !isCancel) {
setImages(images);
}
}
fileReader.readAsDataURL(file);
})
};
return () => {
isCancel = true;
fileReaders.forEach(fileReader => {
if (fileReader.readyState === 1) {
fileReader.abort()
}
})
}
}, [imageFiles]);
return (
{
images.length > 0 ?
{
images.map((image, idx) => {
return
Lebih dari 200 ribu pengembang menggunakan LogRocket untuk menciptakan pengalaman digital yang lebih baik
Pelajari lebih lanjut →
Cara mempratinjau satu gambar sebelum mengunggah di React
Di bagian ini, kita akan melihat cara mempratinjau satu gambar sebelum mengunggah di React dengan FileReader API. Diasumsikan Anda sudah menyiapkan proyek React
Kode di bawah ini menunjukkan cara membaca dan mempratinjau satu gambar di Bereaksi dengan FileReader API. Kami menggunakan elemen input_ bertipe
8 untuk menelusuri file gambar. Karena kami ingin mempratinjau satu gambar, saya telah menghilangkan atribut boolean
const changeHandler = (e) => {
const { files } = e.target
for (let i = 0; i < files.length; i++) {
const file = files[i]; // OR const file = files.item(i);
}
}
8 pada elemen input
import { useEffect, useState } from 'react';
const imageMimeType = /image\/(png|jpg|jpeg)/i;
function App() {
const [file, setFile] = useState(null);
const [fileDataURL, setFileDataURL] = useState(null);
const changeHandler = (e) => {
const file = e.target.files[0];
if (!file.type.match(imageMimeType)) {
alert("Image mime type is not valid");
return;
}
setFile(file);
}
useEffect(() => {
let fileReader, isCancel = false;
if (file) {
fileReader = new FileReader();
fileReader.onload = (e) => {
const { result } = e.target;
if (result && !isCancel) {
setFileDataURL(result)
}
}
fileReader.readAsDataURL(file);
}
return () => {
isCancel = true;
if (fileReader && fileReader.readyState === 1) {
fileReader.abort();
}
}
}, [file]);
return (
<>
{fileDataURL ?
{
LogRocket adalah solusi pemantauan aplikasi frontend yang memungkinkan Anda memutar ulang masalah seolah-olah terjadi di browser Anda sendiri. Alih-alih menebak mengapa kesalahan terjadi, atau meminta tangkapan layar dan log dump dari pengguna, LogRocket memungkinkan Anda memutar ulang sesi untuk segera memahami apa yang salah. Ini berfungsi sempurna dengan aplikasi apa pun, terlepas dari kerangka kerja, dan memiliki plugin untuk mencatat konteks tambahan dari Redux, Vuex, dan @ngrx/store
Selain mencatat tindakan dan status Redux, LogRocket merekam log konsol, kesalahan JavaScript, stacktraces, permintaan/respons jaringan dengan header + badan, metadata browser, dan log kustom. Ini juga melengkapi DOM untuk merekam HTML dan CSS pada halaman, membuat ulang video dengan piksel sempurna bahkan dari aplikasi satu halaman dan seluler yang paling rumit sekalipun
LogRocket. Visibilitas penuh ke dalam aplikasi React produksi Anda
Men-debug aplikasi React bisa jadi sulit, terutama saat pengguna mengalami masalah yang sulit direproduksi. Jika Anda tertarik untuk memantau dan melacak status Redux, menampilkan kesalahan JavaScript secara otomatis, dan melacak permintaan jaringan yang lambat dan waktu muat komponen, coba LogRocket.
LogRocket menggabungkan pemutaran ulang sesi, analitik produk, dan pelacakan kesalahan – memberdayakan tim perangkat lunak untuk menciptakan pengalaman produk seluler dan web yang ideal. Apa artinya bagi Anda?
Alih-alih menebak mengapa kesalahan terjadi, atau meminta tangkapan layar dan log dump dari pengguna, LogRocket memungkinkan Anda memutar ulang masalah seolah-olah terjadi di browser Anda sendiri untuk segera memahami apa yang salah
Tidak ada lagi peringatan berisik. Pelacakan kesalahan cerdas memungkinkan Anda melakukan triase dan mengkategorikan masalah, lalu belajar darinya. Dapatkan pemberitahuan tentang masalah pengguna yang berdampak, bukan positif palsu. Lebih sedikit peringatan, sinyal jauh lebih berguna
Paket middleware LogRocket Redux menambahkan lapisan visibilitas ekstra ke dalam sesi pengguna Anda. LogRocket mencatat semua tindakan dan menyatakan dari toko Redux Anda
Bagaimana cara membaca konten gambar dalam JavaScript?
Kami meneruskan objek File ke. readAsDataURL() dan kemudian tunggu handler diteruskan ke. onload() metode untuk mengaktifkan dengan hasil . Hasilnya sekarang dapat diatur sebagai src dari gambar.
Bagaimana cara membaca file gambar lokal dalam JavaScript?
Bagaimana cara memuat file gambar dalam JavaScript?
Cara Memuat Gambar Dengan Async JavaScript .
Buat Gambar dengan JavaScript
Tetapkan URL ke atribut src dari gambar baru
Buat penangan untuk atribut onload, ini akan dipicu setelah gambar diunduh
Bagaimana cara membaca file dalam JavaScript?
Untuk membaca file, gunakan FileReader , yang memungkinkan Anda membaca konten objek File ke dalam memori. Anda dapat menginstruksikan FileReader untuk membaca file sebagai buffer array, URL data, atau teks. // Periksa apakah file tersebut adalah gambar.
