fileinput 时间_在使用vue时候使用bootstrap-fileinput

bootstrap-fileinput这个控件不错，首先感谢这个控件的作者

在使用vue的时候当然是不太愿意再回到原始的dom操作时代$(...)之类写一大堆整个项目中完全重复的默认配置。

我希望简单，像这样：

实际上的确简单了不少，不过缺点是同事在接手这个逻辑的时候需要一定的熟悉时间，当然前端大佬不需要。

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

下面给出了一般性的解(代码粗鄙，谨慎借鉴)：

Vue.component('c-fileinput', {

template: '',

props: ['value', 'files'],

mounted: function () {

var thiz = this;

if (typeof(thiz.value) === "string")var images = [

"",

];

else var images = thiz.value.map(function (s) {

return ""

});

$(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: "",

msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

initialPreview: images

})

$(thiz.$el).on("fileuploaded", function (event, data, previewId, index) {

thiz.$emit('input', data.response.imageURL)

});

}

})