שילוב Uploadcare להעלאת קבצים ועיבודם

תארו לעצמכם אתר מסחר אלקטרוני עם 5000 מוצרים, שלכל אחד מהם מספר תמונות. בעת העלאה דרך השרת, עיבוד קובץ בודד אורך בממוצע 2 שניות; עם 50 העלאות במקביל, זה 100 שניות. ה-LCP של הדף גדל ל-12 שניות, וה-INP ל-300 אלפיות השנייה. Uploadcare פותר זאת באופן קיצוני: קבצים עוברים ישירות ל-CDN, תוך עקיפת השרת שלכם. השתמשנו בו ביותר מ-30 פרויקטים, כולל אתרי מדיה עם תעבורה גבוהה, ואנחנו יודעים כיצד להגדיר את האינטגרציה בצורה נכונה. לאחר היישום, עומס השרת יורד פי 3–5, ה-LCP יורד ל-2 שניות, ה-INP ל-50 אלפיות השנייה, ומהירות טעינת הדף עולה בממוצע ב-40%. החיסכון הממוצע במשאבי שרת מגיע ל-70% מתקציב האירוח. החיסכון תלוי בהיקף הפרויקט האישי.

כיצד פועל Uploadcare

שירות הCDN מקבל קבצים מהדפדפן; הקצה האחורי שלכם מקבל רק את ה-UUID. דרך ה-URL ניתן לקבל את הגרסה המקורית, התצוגה המקדימה או הגרסאות שעברו טרנספורמציה. אפס עומס על האירוח שלכם — הכל מעובד בצד ה-CDN עם אופטימיזציה וקאשינג אוטומטיים. העלאת קובץ דרך Uploadcare במקום דרך השרת יכולה להפחית את זמן ההעלאה מ-2 שניות ל-0.4 שניות — מהיר יותר מפי 5. השירות מעבד מיליוני בקשות בדקה, מה שמבטיח אמינות גבוהה. Uploadcare בודק אוטומטית קבצים לאיתור תוכנות זדוניות, ומפחית סיכוני אבטחה.

מדוע Uploadcare עדיף על פתרון מותאם אישית

Uploadcare מפחית את זמן ההעלאה פי 3–5 בהשוואה לגישה הקלאסית. בחרנו בו עבור עצמנו ולקוחותינו — יותר מ-30 פרויקטים מוצלחים מאשרים את אמינותו.

כיצד לשלב את Uploadcare ב-React

התקינו את החבילה והגדירו את רכיב ההעלאה. הוראות שלב אחר שלב:

1. התקינו את @uploadcare/react-uploader ואת הסגנונות.
2. ייבאו את FileUploaderRegular ואת ה-CSS.
3. ספקו את המפתח הציבורי באמצעות משתני סביבה.
4. השתמשו ברכיב עם קריאות חוזרות onFileUploadSuccess ו-onFileUploadFailed.
5. בהצלחה, קבלו את האובייקט עם ה-UUID ושלחו אותו לקצה האחורי.

import { FileUploaderRegular } from '@uploadcare/react-uploader'
import '@uploadcare/react-uploader/core.css'

interface UploadedFile {
  uuid: string
  cdnUrl: string
  name: string
  size: number
  mimeType: string
}

interface UploaderProps {
  onUpload: (file: UploadedFile) => void
  accept?: string
  maxFileSize?: number
  multiple?: boolean
}

function FileUploader({ onUpload, accept, maxFileSize, multiple = false }: UploaderProps) {
  return (
    <FileUploaderRegular
      pubkey={import.meta.env.VITE_UPLOADCARE_PUBLIC_KEY}
      multiple={multiple}
      accept={accept}
      maxLocalFileSizeBytes={maxFileSize}
      onFileUploadSuccess={(file) => {
        onUpload({
          uuid: file.uuid,
          cdnUrl: file.cdnUrl,
          name: file.name ?? '',
          size: file.size ?? 0,
          mimeType: file.mimeType ?? '',
        })
      }}
      onFileUploadFailed={(file) => {
        console.error('Upload failed:', file.errors)
      }}
      imgOnly={accept === 'image/*'}
    />
  )
}

אם נדרש ממשק משתמש מותאם אישית, אנו מיישמים מערכת העלאה מותאמת מאפס. כדי לעקוב אחר התקדמות, השתמשו ב-hook import { FileUploaderRegular } from '@uploadcare/react-uploader' import '@uploadcare/react-uploader/core.css' interface UploadedFile { uuid: string cdnUrl: string name: string size: number mimeType: string } interface UploaderProps { onUpload: (file: UploadedFile) => void accept?: string maxFileSize?: number multiple?: boolean } function FileUploader({ onUpload, accept, maxFileSize, multiple = false }: UploaderProps) { return ( <FileUploaderRegular pubkey={import.meta.env.VITE_UPLOADCARE_PUBLIC_KEY} multiple={multiple} accept={accept} maxLocalFileSizeBytes={maxFileSize} onFileUploadSuccess={(file) => { onUpload({ uuid: file.uuid, cdnUrl: file.cdnUrl, name: file.name ?? '', size: file.size ?? 0, mimeType: file.mimeType ?? '', }) }} onFileUploadFailed={(file) => { console.error('Upload failed:', file.errors) }} imgOnly={accept === 'image/*'} /> ) } — הוא מחזיר את אחוז ההעלאה והסטטוס. דוגמה:

import { useUploadcare } from '@uploadcare/react-uploader'

function UploadProgress() {
  const { progress } = useUploadcare({
    pubkey: import.meta.env.VITE_UPLOADCARE_PUBLIC_KEY,
  })

  return <div>Прогресс: {progress}%</div>
}

טרנספורמציות תמונה זמינות

התכונה המרכזית: עיבוד תמונות ללא קוד בקצה האחורי. בנו שרשראות פעולות דרך ה-URL.

דוגמת URL: /blur/20.

כיצד לאבטח העלאות בקצה האחורי

העלאה מצד הלקוח פירושה שהקצה האחורי מקבל רק את ה-UUID. יש לוודא שהקובץ אכן קיים ושייך לפרויקט שלכם, לבדוק את סוג ה-mime והגודל. דוגמה ב-Laravel:

public function store(Request $request): JsonResponse
{
    $request->validate([
        'file_uuid' => ['required', 'string', 'regex:/^[a-f0-9-]{36}$/'],
    ]);

    $uuid = $request->input('file_uuid');

    // Проверка через Uploadcare REST API
    $response = Http::withHeaders([
        'Authorization' => 'Uploadcare.Simple ' . config('services.uploadcare.public_key') . ':' . config('services.uploadcare.secret_key'),
    ])->get("https://api.uploadcare.com/files/{$uuid}/");

    if (!$response->successful()) {
        return response()->json(['error' => 'Файл не найден'], 422);
    }

    $fileInfo = $response->json();

    // Проверка mime-типа
    if (!str_starts_with($fileInfo['mime_type'], 'image/')) {
        return response()->json(['error' => 'Допустимы только изображения'], 422);
    }

    // Сохраняем UUID в базу
    $media = Media::create([
        'uuid' => $uuid,
        'cdn_url' => $fileInfo['original_file_url'],
        'filename' => $fileInfo['original_filename'],
        'size' => $fileInfo['size'],
        'mime_type' => $fileInfo['mime_type'],
    ]);

    return response()->json($media);
}

עבור Node.js, אימות דומה מתבצע עם https://ucarecdn.com/{uuid}/-/scale_crop/300x300/center/-/format/webp/-/quality/smart/ וכותר האישור. אנו גם מחברים אימות דרך Uploadcare REST API (מתודת /files/{uuid}/). זה מגן מפני UUID מזויף ופורמטים לא רצויים.

ציר זמן ליישום

אינטגרציה בסיסית עם וידג'ט ואימות בקצה האחורי אורכת 0.5 עד יום אחד. אם נדרשים ממשק משתמש מותאם אישית, מטפלים נוספים או העברת קבצים קיימים, ציר הזמן מוגדר באופן אישי. האינטגרציה מחזירה את עצמה במהירות באמצעות הפחתת עלויות השרת.

מה כולל שירות האינטגרציה

• התקנה והגדרה של וידג'ט Uploadcare (React, Vue או Angular).
• הגדרת טרנספורמציות CDN לפי דרישות הפרויקט.
• פיתוח אימות UUID בקצה האחורי (Laravel, Node.js, Django).
• אינטגרציה עם אחסון קיים (S3, דיסקים מקומיים).
• תיעוד לשימוש ותמיכה.
• הדרכת צוות (שעה אונליין).
• אחריות ל-3 חודשים על האינטגרציה.

הזמינו אינטגרציה מלאה של Uploadcare — אנו נבצע ביקורת, נגדיר את הווידג'ט והקצה האחורי. קבלו ייעוץ להגדרת Uploadcare לפרויקט שלכם. צרו קשר כדי לדון במשימות שלכם.