Lưu hình ảnh trong cơ sở dữ liệu laravel

5

6

7

8

9

Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // Las imágenes se van a usar bajo este nombre de parámetro
    maxFilesize: 2 // Tamaño máximo en MB
};

0

Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // Las imágenes se van a usar bajo este nombre de parámetro
    maxFilesize: 2 // Tamaño máximo en MB
};

1_

Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // Las imágenes se van a usar bajo este nombre de parámetro
    maxFilesize: 2 // Tamaño máximo en MB
};

2

Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // Las imágenes se van a usar bajo este nombre de parámetro
    maxFilesize: 2 // Tamaño máximo en MB
};

3_

Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // Las imágenes se van a usar bajo este nombre de parámetro
    maxFilesize: 2 // Tamaño máximo en MB
};

4

60

61____362

63

64

65

66

Tìm hiểu cách tải lên nhiều hình ảnh trong Laravel chỉ bằng cách kéo và thả, sử dụng Dropzone

Tải lên hình ảnh bằng cách kéo và thả

Trong hướng dẫn này, bạn sẽ học cách lập trình như sau

Một khu vực nơi người dùng của bạn có thể kéo và thả hình ảnh

Trên thực tế, họ sẽ có thể xem hình thu nhỏ của từng hình ảnh mà họ đang tải lên và thanh tiến trình cho từng hình ảnh.

Nếu tôi chỉ muốn chọn và tải lên nhiều hình ảnh thì sao?

Nó cũng có thể

Với dropzone, bạn có thể nhấp vào khu vực tương ứng và bạn có thể chọn hình ảnh từ tệp của mình

Cách sử dụng Dropzone trong dự án của chúng tôi

vùng Loại. js là thư viện Javascript mà chúng ta sẽ sử dụng để triển khai khu vực "kéo và thả"

Với ý định rằng toàn bộ quá trình có vẻ rõ ràng hơn đối với bạn, tôi đã chia hướng dẫn thành 4 bước đơn giản

1. Thêm dropzone vào dự án của chúng tôi
2. Định cấu hình biểu mẫu của chúng tôi để tải lên hình ảnh
3. Xử lý yêu cầu trên máy chủ
4. Xác minh rằng mọi thứ đều hoạt động [và ngạc nhiên về mức độ dễ dàng của nó]

Bước 1. Thêm dropzone vào dự án của chúng tôi

Đối với điều này, bạn có 2 lựa chọn

Nếu bạn chọn tùy chọn đầu tiên, bạn sẽ có một cái gì đó như

Nhưng nếu bạn chọn tùy chọn thứ hai

Khỏe

Chúng tôi đã có các tệp JavaScript để dropzone hoạt động

Bây giờ chúng ta chỉ cần thêm các phong cách

CDN cũng cung cấp cho chúng tôi cách đưa CSS tương ứng vào

Bước 2. Định cấu hình biểu mẫu của chúng tôi

Để đẩy nhanh bước này, chúng ta sẽ bắt đầu từ ví dụ xuất hiện trong tài liệu chính thức

Chúng tôi tạo biểu mẫu của chúng tôi

Và chúng tôi khởi tạo dropzone bằng JavaScript như thế này

Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // Las imágenes se van a usar bajo este nombre de parámetro
    maxFilesize: 2 // Tamaño máximo en MB
};

Trong ví dụ này,

3 là

4 trong biểu mẫu của chúng tôi [sử dụng ký hiệu camelCase]

Và đây là cách chúng tôi có dropzone đã được định cấu hình ở phía máy khách

Tuy nhiên, cần phải định cấu hình máy chủ của chúng tôi [phụ trợ] để nó sẵn sàng nhận và lưu những hình ảnh này.

Bước 3. Yêu cầu xử lý trong bộ điều khiển của chúng tôi

Chúng ta phải làm gì vào thời điểm này?

• Lưu hình ảnh trong một thư mục của dự án Laravel của chúng tôi
• Lưu một bản ghi trong cơ sở dữ liệu của chúng tôi, với tên của hình ảnh, để truy cập nó sau

Mã để sử dụng cho mục đích này sẽ phụ thuộc rất nhiều vào dự án bạn đang phát triển.

• Bạn có thể đang làm việc trên một thư viện cho từng người dùng của mình
• Bạn có thể có nhiều phòng trưng bày cho mỗi người dùng hoặc thậm chí có các phòng trưng bày được chia sẻ

Yêu cầu của bạn sẽ ảnh hưởng đến việc lập mô hình của các bảng mà bạn sẽ cần

Ví dụ, hãy làm như sau

• Mỗi người dùng sẽ có một danh sách các dự án
• Đối với mỗi dự án, người dùng sẽ có thể tải lên hình ảnh [không, một hoặc nhiều]

Trong trường hợp cụ thể này, chúng tôi có 3 mô hình

• Người dùng [với sự di chuyển tương ứng của nó
  5]
• Dự án [với sự di chuyển tương ứng của nó
  6]
• ProjectImage [với sự di chuyển tương ứng của nó
  7]

Đối với ví dụ này, mỗi dự án sẽ tương đương với một thư viện hình ảnh

Nhưng sự thật là một dự án có thể có nhiều dữ liệu hơn, ngoài những hình ảnh

tôi lặp lại. tất cả phụ thuộc vào yêu cầu cụ thể của bạn

Chúng ta có thể tạo mô hình và di chuyển cho những hình ảnh như thế này

0

Vì vậy, trong quá trình di chuyển của chúng tôi, chúng tôi có thể có

________mười một

• Chúng tôi có một khóa ngoại, để biết hình ảnh thuộc về dự án nào
• Và một khóa ngoại khác để biết người dùng nào đã tải lên hình ảnh
• Bạn có thể có nhiều dữ liệu hơn, bao nhiêu tùy thích, nhưng đừng bao giờ quên có một trường để lưu tên của hình ảnh

Tôi đặt tất cả những điều này để cho bạn hình dung rõ ràng hơn về ví dụ mà chúng ta đang thấy

Bây giờ chúng ta hãy bắt tay vào công việc

Thuộc tính

8 của biểu mẫu rất quan trọng, vì nó xác định tuyến đường mà các yêu cầu sẽ được thực hiện để tải hình ảnh lên

Trong mã ví dụ, nó có giá trị là

9

Tại đây bạn có thể sử dụng tuyến đường mà bạn cho là tương ứng

Đối với ví dụ này, chúng tôi sẽ sử dụng

0

Theo cách mà trong tham số tuyến đường

4, chúng tôi sẽ chỉ ra dự án mà hình ảnh sẽ được tải lên

6

Đừng quên Mã thông báo CSRF. Laravel cần nó vì nó là một yêu cầu POST.

và thế là xong. chúng tôi đã có nó

Đường dẫn nhỏ này sẽ được bộ điều khiển của chúng tôi xử lý khi đó là yêu cầu POST.

7

Như vậy, trong

2 chúng ta có

9

Phương pháp

3 là phương pháp sẽ làm nên điều kỳ diệu

Ở đó, chúng tôi có

4 của dự án mà hình ảnh đang được tải lên

Và một đối tượng

5 với thông tin hình ảnh được tải lên

Vì vậy

0

Với điều này, mọi thứ sẽ hoạt động. Nhưng dù sao

Chúng ta hãy đi qua từng dòng phương thức

3 làm gì

• Lấy thông tin tệp đã được tải lên đối tượng có tên là
  7
• Xác định một biến
  8 với đường dẫn mà chúng tôi muốn lưu hình ảnh của mình
• Xác định một biến
  9 với tên sẽ được sử dụng để lưu hình ảnh. Ở đây chúng tôi sử dụng
  0 để đảm bảo rằng tên không bị lặp lại và không có hình ảnh nào bị ghi đè
• Chúng tôi lưu hình ảnh bằng cách sử dụng
  1 [chúng tôi cho biết nơi lưu và với tên gì]
• Cuối cùng, chúng tôi tạo trong cơ sở dữ liệu của mình một bản ghi với thông tin của hình ảnh vừa được lưu. Đăng ký này sẽ cho phép chúng tôi hiển thị hình ảnh trong bộ sưu tập của chúng tôi

kết luận

Laravel và PHP giúp chúng tôi dễ dàng tải lên hình ảnh

Như bạn có thể thấy trong đoạn mã cuối cùng, chúng ta có thể làm điều đó với rất ít dòng.

Mặt khác, Dropzone cho phép chúng tôi tải lên hình ảnh với giao diện thân thiện với người dùng.

Và tất cả điều này có thể được thiết lập một cách nhanh chóng

Có lẽ hướng dẫn hơi dài để đi vào chi tiết. Nhưng nếu bạn làm theo các bước, bạn sẽ thấy rằng nó thực sự dễ dàng.

Xin lỗi vì đã nói vòng vo, nhưng tôi muốn nó hữu ích ngay cả với những người mới làm quen với Laravel.

Cảm ơn bạn đã ghé thăm và nhớ chia sẻ nếu nó hữu ích

Thêm. giảm dung lượng ảnh trước khi lưu

Nếu bạn muốn thực hiện bất kỳ thao tác nào trên hình ảnh mà người dùng của bạn tải lên, chẳng hạn như

• giảm kích thước
• Xoay độ X
• cắt hình ảnh
• Hoặc áp dụng một số hiệu ứng trên nó

Tôi khuyên bạn nên xem video sau

tiền thưởng 2. chụp phản hồi của máy chủ

Nói chung, chúng tôi có một phần chứa tất cả các hình ảnh đã tải lên và phần thứ hai có dropzone

Người dùng có thể kéo và thả hình ảnh của họ vào khu vực chúng tôi áp dụng dropzone

Những hình ảnh này sẽ được tải lên ngay lập tức. Tuy nhiên, chúng sẽ không được hiển thị trong danh sách các hình ảnh đã tải lên

Nếu chúng tôi muốn hiển thị chúng ở phía đó, thì cần phải sử dụng sự kiện dropzone

2, để nắm bắt phản hồi nhận được từ bộ điều khiển, sau khi tải lên thành công.

Vì vậy, trong bộ điều khiển của chúng tôi, chúng tôi trả về thông tin của hình ảnh vừa được tải lên, thêm một dòng vào cuối phương thức

3

1

Và trong Javascript của chúng tôi, chúng tôi ghi lại phản hồi đó

2

Vì vậy, chúng tôi nhận được trong bảng điều khiển một cái gì đó như sau

Ở đây, điều chúng tôi quan tâm chủ yếu là thuộc tính

4, vì với dữ liệu này, chúng tôi có thể hiển thị hình ảnh vừa được tải lên

Làm cách nào để lưu hình ảnh trong laravel?

Làm cách nào để tải hình ảnh lên cơ sở dữ liệu?

Làm cách nào để tải tệp lên trong laravel?