react images uploading Unduh - react images uploading Pengunduhan kode sumber

react images uploading

Kode sumber lainnya

3.1.7

Unduh

reaksi-pengunggahan gambar

Instalasi
Penggunaan
Alat peraga
- Catatan
Opsi yang diekspor
Kontributor

Instalasi

npm

npm install --save react-images-uploading

benang

yarn add react-images-uploading

Penggunaan

Anda dapat melihat demo dasar di sini:

Javascript: https://codesandbox.io/s/react-images-uploading-demo-u0khz
Naskah: https://codesandbox.io/s/react-images-uploading-demo-typescript-fr2zm
Render Sisi Server (NextJS): https://codesandbox.io/s/react-images-uploading-ssr-j1qq2

Dasar

 import React from 'react' ;
import ImageUploading from 'react-images-uploading' ;

export function App ( ) {
  const [ images , setImages ] = React . useState ( [ ] ) ;
  const maxNumber = 69 ;

  const onChange = ( imageList , addUpdateIndex ) => {
    // data for submit
    console . log ( imageList , addUpdateIndex ) ;
    setImages ( imageList ) ;
  } ;

  return (
    < div className = "App" >
      < ImageUploading
        multiple
        value = { images }
        onChange = { onChange }
        maxNumber = { maxNumber }
        dataURLKey = "data_url"
      >
        { ( {
          imageList ,
          onImageUpload ,
          onImageRemoveAll ,
          onImageUpdate ,
          onImageRemove ,
          isDragging ,
          dragProps ,
        } ) => (
          // write your building UI
          < div className = "upload__image-wrapper" >
            < button
              style = { isDragging ? { color : 'red' } : undefined }
              onClick = { onImageUpload }
              { ... dragProps }
            >
              Click or Drop here
            < / button >
            &nbsp;
            < button onClick = { onImageRemoveAll } > Remove all images < / button >
            { imageList . map ( ( image , index ) => (
              < div key = { index } className = "image-item" >
                < img src = { image [ 'data_url' ] } alt = "" width = "100" / >
                < div className = "image-item__btn-wrapper" >
                  < button onClick = { ( ) => onImageUpdate ( index ) } > Update < / button >
                  < button onClick = { ( ) => onImageRemove ( index ) } > Remove < / button >
                < / div >
              < / div >
            ) ) }
          < / div >
        ) }
      < / ImageUploading >
    < / div >
  ) ;
}

Validasi

...
  { ( { imageList , onImageUpload , onImageRemoveAll , errors } ) => (
    errors && < div >
      { errors . maxNumber && < span > Number of selected images exceed maxNumber < / span>}
      { errors . acceptType && < span > Your selected file type is not allow < / span>}
      { errors . maxFileSize && < span > Selected file size exceed maxFileSize < / span>}
      { errors . resolution && < span > Selected file is not match your desired resolution < / span>}
    < / div >
  ) }
...

Seret dan Jatuhkan

...
  { ( { imageList , dragProps , isDragging } ) => (
    < div { ... dragProps } >
      { isDragging ? "Drop here please" : "Upload space" }
      { imageList . map ( ( image , index ) => (
        < img key = { index } src = { image . data_url } / >
      ) ) }
    < / div >
  ) }
...

Alat peraga

parameter	jenis	pilihan	bawaan	keterangan
nilai	susunan		[]	Daftar gambar
di Perubahan	fungsi	(daftar gambar, addUpdateIndex) => batal		Dipanggil ketika tindakan menambah, memperbarui, atau menghapus dipanggil
dataURLKey	rangkaian		dataURL	Nama bidang khusus yang ditetapkan ke base64 gambar yang dipilih
banyak	boolean		PALSU	Tetapkan `true` untuk beberapa pilihan
nomor maksimal	nomor		1000	Jumlah gambar yang dapat dipilih pengguna jika mode = `multiple`
diError	fungsi	(kesalahan, file) => batal		Dipanggil ketika ada kesalahan
terimaType	susunan	['jpg', 'gif', 'png']	[]	Ekstensi file yang akan diunggah
maxFileSize	nomor			Ukuran gambar maksimal (Byte) dan digunakan dalam validasi
tipe resolusi	rangkaian	'mutlak' \| 'kurang' \| 'lebih' \| 'perbandingan'		Digunakan untuk validasi gambar dengan lebar & tinggi yang disediakan
resolusiLebar	nomor	> 0
resolusiTinggi	nomor	> 0
masukanAlat Peraga	Bereaksi.HTMLProps<HTMLInputElement>
izinkanNonImageType	boolean		PALSU	Digunakan untuk mengunggah tujuan jenis non-gambar (Misalnya txt, pdf, heic, ...)

Catatan

tipe resolusi

nilai	keterangan
mutlak	lebar gambar === resolusiLebar && tinggi gambar === resolusiTinggi
perbandingan	(resolusiLebar / resolusiTinggi) === (lebar gambar / tinggi gambar)
lebih sedikit	lebar gambar < lebar resolusi && tinggi gambar < tinggi resolusi
lagi	lebar gambar > Lebar resolusi && tinggi gambar > tinggi resolusi

Opsi yang diekspor

parameter	jenis	keterangan
Daftar gambar	susunan	Daftar gambar yang akan dirender.
diImageUpload	fungsi	Dipanggil ketika suatu elemen diklik dan dipicu untuk membuka dialog file
padaImageRemoveAll	fungsi	Dipanggil saat menghapus semua gambar
pada Pembaruan Gambar	(updateIndex: angka) => batal	Dipanggil saat memperbarui gambar di `updateIndex` .
diImageRemove	(deleteIndex: angka \| angka[]) => batal	Dipanggil saat menghapus satu atau daftar gambar.
kesalahan	obyek	Objek validasi yang diekspor
dragProps	obyek	Alat peraga elemen asli untuk fitur seret dan lepas
adalah Menyeret	boolean	"benar" jika gambar sedang diseret