react images uploading تحميل - react images uploading تنزيل كود المصدر

react images uploading

شفرة المصدر الأخرى

3.1.7

تنزيل

رد فعل-صور-تحميل

تثبيت
الاستخدام
الدعائم
- ملحوظة
الخيارات المصدرة
المساهمين

تثبيت

npm

npm install --save react-images-uploading

غزل

yarn add react-images-uploading

الاستخدام

يمكنك الاطلاع على العرض التوضيحي الأساسي هنا:

جافا سكريبت: https://codesandbox.io/s/react-images-uploading-demo-u0khz
الآلة الكاتبة: https://codesandbox.io/s/react-images-uploading-demo-typescript-fr2zm
عرض جانب الخادم (NextJS): https://codesandbox.io/s/react-images-uploading-ssr-j1qq2

أساسي

 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 >
  ) ;
}

تصديق

...
  { ( { 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 >
  ) }
...

السحب والإسقاط

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

الدعائم

المعلمة	يكتب	خيارات	تقصير	وصف
قيمة	صفيف		[]	قائمة الصور
onChange	وظيفة	(imageList, addUpdateIndex) => باطل		يتم استدعاؤه عند استدعاء إجراء الإضافة أو التحديث أو الحذف
dataURLKey	خيط		dataURL	اسم الحقل المخصص الذي تم تعيينه لـ base64 للصورة المحددة
عديد	منطقية		خطأ شنيع	تعيين `true` للاختيارات المتعددة
maxNumber	رقم		1000	عدد الصور التي يمكن للمستخدم تحديدها إذا كان الوضع = `multiple`
خطأ	وظيفة	(الأخطاء، الملفات) => باطلة		يتم استدعاؤه عندما يكون به أخطاء
قبولType	صفيف	['jpg'، 'gif'، 'png']	[]	امتداد الملف (امتدادات) الملف المراد تحميله
maxFileSize	رقم			الحد الأقصى لحجم الصورة (بايت) ويتم استخدامه في التحقق من الصحة
نوع الدقة	خيط	'مطلقة' \| 'أقل' \| "المزيد" \| 'نسبة'		الاستخدام للتحقق من صحة الصورة مع العرض والارتفاع المقدمين
عرض الدقة	رقم	> 0
القرارارتفاع	رقم	> 0
inputProps	React.HTMLProps<HTMLInputElement>
allowNonImageType	منطقية		خطأ شنيع	الاستخدام لتحميل غرض غير نوع الصورة (على سبيل المثال، txt، pdf، heic، ...)

ملحوظة

نوع الدقة

قيمة	وصف
مطلق	عرض الصورة === عرض الدقة && ارتفاع الصورة === ارتفاع الدقة
نسبة	(عرض الدقة / ارتفاع الدقة) === (عرض الصورة / ارتفاع الصورة)
أقل	عرض الصورة < عرض الدقة && ارتفاع الصورة < ارتفاع الدقة
أكثر	عرض الصورة > الدقة العرض && ارتفاع الصورة > الدقة الارتفاع

الخيارات المصدرة

المعلمة	يكتب	وصف
imageList	صفيف	قائمة الصور لتقديمها.
onImageUpload	وظيفة	يتم استدعاؤه عند النقر على أحد العناصر وتشغيله لفتح مربع حوار الملف
onImageRemoveAll	وظيفة	يتم استدعاؤه عند إزالة كافة الصور
onImageUpdate	(updateIndex: number) => باطل	يتم استدعاؤه عند تحديث صورة في `updateIndex` .
onImageRemove	(deleteIndex: number \| number[]) => void	يتم استدعاؤه عند إزالة صورة واحدة أو صورة قائمة.
أخطاء	هدف	تم تصدير كائن التحقق من الصحة
DragProps	هدف	دعائم العناصر الأصلية لميزة السحب والإفلات
هو السحب	منطقية	"صحيح" إذا تم سحب الصورة