Lưu hình ảnh trong cơ sở dữ liệu laravel ✅ Đầy đủ
Mẹo về Lưu hình ảnh trong cơ sở tài liệu laravel Chi Tiết
Hà Văn Thắng đang tìm kiếm từ khóa Lưu hình ảnh trong cơ sở tài liệu laravel được Cập Nhật vào lúc : 2022-12-21 19:30:23 . Với phương châm chia sẻ Bí quyết về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi đọc tài liệu vẫn ko hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Mình lý giải và hướng dẫn lại nha.5 Nội dung chính Show
- Tải lên hình ảnh bằng phương pháp kéo và thảCách sử dụng Dropzone trong dự án công trình bất Động sản của chúng tôiBước 1. Thêm dropzone vào dự án công trình bất Động sản của chúng tôiBước 2. Định thông số kỹ thuật biểu mẫu của chúng tôiBước 3. Yêu cầu xử lý trong bộ điều khiển của chúng tôikết luậnThêm. giảm dung tích ảnh trước khi lưutiền thưởng 2. chụp phản hồi của máy chủ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ở tài liệu?Làm cách nào để tải tệp lên trong laravel?
Tìm hiểu cách tải lên nhiều hình ảnh trong Laravel chỉ bằng phương pháp kéo và thả, sử dụng Dropzone
Tải lên hình ảnh bằng phương pháp 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 tiêu dùng của bạn hoàn toàn có thể kéo và thả hình ảnh
Trên thực tế, họ sẽ hoàn toàn có thể xem hình thu nhỏ của từng hình ảnh mà người ta đ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 hoàn toàn có thể
Với dropzone, bạn hoàn toàn có thể nhấp vào khu vực tương ứng và bạn hoàn toàn có thể chọn hình ảnh từ tệp của tớ
Cách sử dụng Dropzone trong dự án công trình bất Động sản của chúng tôi
vùng Loại. js là thư viện Javascript mà tất cả 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ẻ như 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
Thêm dropzone vào dự án công trình bất Động sản của chúng tôiĐịnh thông số kỹ thuật biểu mẫu của chúng tôi để tải lên hình ảnhXử lý yêu cầu trên máy chủXác minh rằng mọi thứ đều hoạt động và sinh hoạt giải trí (và ngạc nhiên về mức độ thuận tiện và đơn giản của nó)Bước 1. Thêm dropzone vào dự án công trình bất Động sả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 chiếc gì đó như
Nhưng nếu bạn chọn tùy chọn thứ hai
Khỏe
Chúng tôi đã có những tệp JavaScript để dropzone hoạt động và sinh hoạt giải trí
Bây giờ tất cả chúng ta chỉ việc thêm những phong cách
CDN cũng đáp ứng cho chúng tôi cách đưa CSS tương ứng vào
Bước 2. Định thông số kỹ thuật biểu mẫu của chúng tôi
Để đẩy nhanh bước này, tất cả chúng ta sẽ bắt nguồn 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ư vậy 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 thông số kỹ thuật ở phía máy khách
Tuy nhiên, nên phải định thông số kỹ thuật sever 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 công trình bất Động sản Laravel của chúng tôiLưu một bản ghi trong cơ sở tài 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 tiêu này sẽ phụ thuộc rất nhiều vào dự án công trình bất Động sản bạn đang phát triển.
- Bạn hoàn toàn có thể đang thao tác trên một thư viện cho từng người tiêu dùng của mìnhBạn hoàn toàn có thể có nhiều phòng trưng bày cho từng người tiêu dùng hoặc thậm chí có những 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 quy mô của những bảng mà bạn sẽ cần
Ví dụ, hãy làm như sau
- Mỗi người tiêu dùng sẽ có một list những dự ánĐối với mỗi dự án công trình bất Động sản, người tiêu dùng sẽ hoàn toàn có thể tải lên hình ảnh (không, một hoặc nhiều)
Trong trường hợp rõ ràng này, chúng tôi có 3 quy mô
- Người dùng (với sự di tán tương ứng của nó 5)Dự án (với sự di tán tương ứng của nó 6)ProjectImage (với sự di tán tương ứng của nó 7)
Đối với ví dụ này, mỗi dự án công trình bất Động sả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ông trình bất Động sản hoàn toàn có thể có nhiều tài 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 rõ ràng của bạn
Chúng ta hoàn toàn có thể tạo quy mô và di tán cho những hình ảnh như vậy này
0Vì vậy, trong quá trình di tán của chúng tôi, chúng tôi hoàn toàn 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 công trình bất Động sản nàoVà một khóa ngoại khác để biết người tiêu dùng nào đã tải lên hình ảnhBạn hoàn toàn có thể có nhiều tài 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 tưởng tượng rõ ràng hơn về ví dụ mà tất cả chúng ta đang thấy
Bây giờ tất cả chúng ta hãy bắt tay vào việc làm
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à những yêu cầu sẽ được thực hiện để tải hình ảnh lênTrong mã ví dụ, nó có mức giá trị là
9Tại đây bạn hoàn toà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
0Theo cách mà trong tham số tuyến đường
4, chúng tôi sẽ chỉ ra dự án công trình bất Động sản mà hình ảnh sẽ được tải lên6Đừ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.
7Như vậy, trong
2 tất cả chúng ta có9Phương pháp
3 là phương pháp sẽ làm ra điều kỳ diệuỞ đó, chúng tôi có
4 của dự án công trình bất Động sản mà hình ảnh đang được tải lênVà một đối tượng
5 với thông tin hình ảnh được tải lênVì vậy
0Với điều này, mọi thứ sẽ hoạt động và sinh hoạt giải trí. 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 mang tên là 7Xá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ìnhXá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 nói rằng tên không biến thành lặp lại và không còn hình ảnh nào bị ghi đèChúng tôi lưu hình ảnh bằng phương pháp sử dụng
1 (chúng tôi cho biết thêm thêm nơi lưu và với tên gì)Cuối cùng, chúng tôi tạo trong cơ sở tài liệu của tớ 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ẽ được 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 thuận tiện và đơn giản tải lên hình ảnh
Như bạn hoàn toàn có thể thấy trong đoạn mã ở đầu cuối, tất cả chúng ta hoàn toàn có thể làm điều đó với rất ít dòng.
Mặt khác, Dropzone được 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 tiêu dùng.
Và tất cả điều này hoàn toàn có thể được thiết lập một cách nhanh gọn
Có lẽ hướng dẫn hơi dài để đi vào rõ ràng. Nhưng nếu bạn tuân theo tiến trình, bạn sẽ thấy rằng nó thực sự thuận tiện và đơn giản.
Xin lỗi vì đã nói vòng vo, nhưng tôi muốn nó hữu ích trong cả với những người dân 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 tích ả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 tiêu dùng của bạn tải lên, ví dụ như
- giảm kích thướcXoay độ Xcắt hình ảnhHoặc áp dụng một số trong những 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 sever
Nói chung, chúng tôi có một phần chứa tất cả những hình ảnh đã tải lên và phần thứ hai có dropzone
Người dùng hoàn toàn có thể kéo và thả hình ảnh của tớ 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 list những hình ảnh đã tải lên
Nếu chúng tôi muốn hiển thị chúng ở phía đó, thì nê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
31Và trong Javascript của chúng tôi, chúng tôi ghi lại phản hồi đó
2Vì vậy, chúng tôi nhận được trong bảng điều khiển một chiếc gì đó như sau
Ở đây, điều chúng tôi quan tâm đa phần là thuộc tính
4, vì với tài liệu này, chúng tôi hoàn toàn có thể hiển thị hình ảnh vừa được tải lên