laravel webpack 使用 bootstrap4 upload
2018年11月20日1.安装
|
1 2 |
npm install bootstrap-fileinput #安装文件上传插件 npm install --save @neos21/bootstrap3-glyphicons #由于bootstrap4取消glyphicons字体的引入,所以我们需要自行下载和配置 |
2配置
打开resources/js/bootstrap.js文件开始配置,注意中文注释
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
window._ = require('lodash'); window.Popper = require('popper.js').default; //开启弹框 /** * We'll load jQuery and the Bootstrap jQuery plugin which provides support * for JavaScript based Bootstrap features such as modals and tabs. This * code may be modified to fit the specific needs of your application. */ try { window.$ = window.jQuery = require('jquery'); require('bootstrap-fileinput/js/fileinput.js') //引入图片上传插件 input 的逻辑全部都写在了这个文件内部了 需要注意！！！ require('bootstrap-fileinput/js/locales/zh.js') //引入图片插件的汉化包 require('bootstrap-fileinput/themes/fa/theme.js') //引入主题包,可选 require('bootstrap'); } catch (e) {} /** * We'll load the axios HTTP library which allows us to easily issue requests * to our Laravel back-end. This library automatically handles sending the * CSRF token as a header based on the value of the "XSRF" token cookie. */ window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; /** * Next we will register the CSRF Token as a common header with Axios so that * all outgoing HTTP requests automatically have it attached. This is just * a simple convenience so we don't have to attach every token manually. */ let token = document.head.querySelector('meta[name="csrf-token"]'); if (token) { window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; } else { console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); } /** * 开启bootstrap弹框 */ $(function () { $('[data-toggle="popover"]').popover() }) /** * Echo exposes an expressive API for subscribing to channels and listening * for events that are broadcast by Laravel. Echo and event broadcasting * allows your team to easily build robust real-time web applications. */ // import Echo from 'laravel-echo' // window.Pusher = require('pusher-js'); // window.Echo = new Echo({ // broadcaster: 'pusher', // key: process.env.MIX_PUSHER_APP_KEY, // cluster: process.env.MIX_PUSHER_APP_CLUSTER, // encrypted: true // }); |
打开resources/sass/app.scss开始配置
|
1 2 3 4 5 6 7 8 |
// Variables 变量文件 @import 'variables'; // Fonts @import url('https://fonts.googleapis.com/css?family=Nunito'); @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/_bootstrap3-glyphicons.scss'; //文件上传样式所需的字体 // Bootstrapb @import '~bootstrap/scss/bootstrap'; @import "~bootstrap-fileinput/css/fileinput.min.css"; //文件上传的样式 |
打开resources/sass/_variables.scss开始配置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// Body $body-bg: #f8fafc; // Typography $font-family-sans-serif: "Nunito", sans-serif; $font-size-base: 0.9rem; $line-height-base: 1.6; // Colors $blue: #3490dc; $indigo: #6574cd; $purple: #9561e2; $pink: #f66D9b; $red: #e3342f; $orange: #f6993f; $yellow: #ffed4a; $green: #38c172; $teal: #4dc0b5; $cyan: #6cb2eb; $myBlue: #3490dc; $custom-file-text: (en:"Browse", ch:"浏览"); $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; //主要配置这个告诉字体在哪里 |
3.使用
bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo
|
1 |
<input id="input-b1" name="input-b1" type="file" class="file" data-browse-on-zone-click="true"> |
