Rate this post

Ở bước này, chúng ta sẽ tìm hiểu Vue-dropzone để có thể tải lên tệp VueJS trong Laravel. Nếu chúng tôi cố gắng tải tệp lên bằng cách thêm tùy chọn kéo và thả, thì có một cách tuyệt vời để làm điều này là chọn dropzone js. Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng thành phần Vue dropzone để tải lên tệp VueJS. Đối với điều này, chúng ta có thể sử dụng laravel 6, Laravel 7 và Laravel 8. Vì vậy, trong tập lệnh VueJS của chúng tôi, dropzone js cũng có thể được sử dụng.

Các bài viết liên quan:

Để tải lên tệp hoặc hình ảnh của Vue.js dropzone, chúng ta nên làm theo quy trình từng bước. Đầu tiên, Laravel 5.6 sẽ được tải xuống. Sau đó, VueJS sẽ được khởi tạo. Sau đó, chúng tôi sẽ cài đặt gói Vue-dropzone. Bây giờ, một bộ điều khiển và một tuyến bài sẽ được tạo bằng cách sử dụng một phương pháp. Chúng tôi sẽ sử dụng bộ điều khiển và tạo một phương thức POST trên đó. Sau đó, chúng tôi sẽ lưu hình ảnh bằng cách viết đoạn mã sau. Nếu chúng tôi muốn thêm chi tiết, chúng tôi cũng có thể viết nó. Quy trình từng bước để tải lên tệp hoặc hình ảnh bằng cách sử dụng các thành phần của Vue-dropzone như sau:

Bước 1:

Đây là bước đầu tiên, và trong bước này, chúng ta sẽ cài đặt dự án Laravel 5.6. Đối với điều này, chúng tôi sẽ mở dấu nhắc lệnh hoặc thiết bị đầu cuối trên hệ thống của mình và sau đó chạy lệnh sau.

composer create-project –prefer-dist laravel/laravel blog  

Bước 2:

Trong bước thứ hai, chúng ta sẽ Tạo Tuyến đường. Đối với điều này, một tuyến bài đăng sẽ được tạo và chúng tôi sẽ viết mã tải lên tệp hoặc hình ảnh trên đó. Vì vậy, hãy lấy tệp đó và sau đó đặt một tuyến đường mới như sau:

route / web.php

Bước 3:

Trong bước thứ ba, chúng ta sẽ tạo Bộ điều khiển. Bây giờ chúng ta sẽ tạo phương thức formSubmit và ImageController. Chúng tôi sẽ sử dụng phương pháp này để lưu trữ tệp hoặc hình ảnh trên máy chủ. Vì vậy, chúng tôi sẽ viết mã cho điều đó bên trong phương thức này. Đối với điều này, chúng tôi sẽ tạo một bộ điều khiển như sau:

app / Http / Controllers / ImageController.php

Bước 4:

Trong bước này, chúng ta sẽ thực hiện Cấu hình npm. Đối với điều này, trước tiên chúng tôi sẽ thêm một thiết lập VueJS. Sau đó, chúng tôi sẽ cài đặt nmp và sau đó cũng cài đặt gói Vue-dropzone. Chúng tôi sẽ sử dụng dự án của mình và sau đó, chúng tôi sẽ sử dụng các lệnh sau:

Cài đặt Vue:

php artisan preset Vue  

Cài đặt npm:

npm install  

Cài đặt Vue-dropzone:

npm install Vue2-dropzone  

Bước 5:

Trong bước thứ năm, chúng ta sẽ Viết trên các thành phần và app.js. Đối với điều này, chúng tôi sẽ đặt đường dẫn app.js và sau đó viết mã. Sau đó, chúng ta sẽ tạo các thành phần của VueJS. Vì vậy, chúng tôi sẽ tạo cả hai tệp và thêm mã sau:

resources/assets/js/app.js:

resources/assets/js/components/ExampleComponent.Vue:

Bước 6:

Trong bước thứ sáu, chúng tôi sẽ hoặc Cập nhật tệp welcome.blade.php. Đối với điều này, tệp ứng dụng / js sẽ được sử dụng. Vì vậy, chúng tôi sẽ cập nhật tệp này bằng cách viết mã sau:

resource / views / welcome.blade.php:

Tệp app.js sẽ được cập nhật khi chúng tôi chạy lệnh dưới đây:

npm run dev

Khi chúng ta chạy ví dụ trên, chúng ta sẽ nhận được kết quả sau:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now