在使用vue时候使用bootstrap-fileinput

bootstrap-fileinput这个控件不错，首先感谢这个控件的作者
在使用vue的时候当然是不太愿意再回到原始的dom操作时代$(...)之类写一大堆整个项目中完全重复的默认配置。
我希望简单，像这样：
    <c-fileinput v-model="rows"></c-fileinput>
实际上的确简单了不少，不过缺点是同事在接手这个逻辑的时候需要一定的熟悉时间，当然前端大佬不需要。

这也是在我探索vue的过程中找到的一般性用法，前端大佬可在评论区吐槽，期待有更优的方式，拜读，学习。

下面给出了一般性的解（代码粗鄙，谨慎借鉴）：
Vue.component('c-fileinput', {

    template: '<input class="input-file form-control" type="file">',
    props: ['value', 'files'],
    mounted: function () {
        var thiz = this;
        if (typeof(thiz.value) === "string")var images = [
            "<img src='" + thiz.value + "' class='file-preview-image' alt='Desert' title='Desert'>",
        ];
        else var images = thiz.value.map(function (s) {
            return "<img src='" + s + "' class='file-preview-image' alt='Desert' title='Desert'>"
        });
        $(thiz.$el).fileinput({
            language: "zh", //设置语言
            uploadUrl: svcHeader + "/XX/ImageUpload.ashx?", //上传的地址
            allowedFileExtensions: ["jpg", "png", "gif", "JPEG"], //接收的文件后缀,
            showUpload: true, //是否显示上传按钮
            dropZoneEnabled: false,
            showCaption: true, //是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            initialPreview: images
        })
        $(thiz.$el).on("fileuploaded", function (event, data, previewId, index) {
            thiz.$emit('input', data.response.imageURL)
        });
    }
})