Vuejs jasnyBoostrap 上载 多张图片的预览效果

原版 jasnybootstrap无法进行多张图片上传后的预览，所以借鉴了一些别的方法。

HTML

<v-form class="manage-file" id="manage-file" ref="form">

<input type="hidden" name="pubprojectid" :value="project.id"></input>

<div class="form-group">

<label class="col-xs-3 control-label">项目图片</label>

<div class="col-xs-8">

<div class="fileinput fileinput-new" data-provides="fileinput">

<div>

<span class="btn btn-default btn-file">

<span class="fileinput-new">选择文件</span>

<span class="fileinput-exists">修改文件</span>

<input type="file" multiple name="files" @change="filesChange">

</span>

<a @click="delFiles" class="btn btn-default fileinput-exists" data-dismiss="fileinput">删除文件</a>

</div>

</div>

<div class="col-xs-12 padding-0">

<div class="fileinput" data-provides="fileinput" v-for="(fileItem, index) in files" style="margin-right: 5px; width: 150px;">

<div class="fileinput-new thumbnail" style="width: 150px;">

<div class="file" style="width: 100%; margin-bottom: 0;">

<a>

<span class="corner"></span>

<div>

<img :src="picSrc[index]" style="height:120px"></img>

</div>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

</v-form>

Vue代码：

//files 和 imgsrc分开，就可以了

for (let i = 0; i < e.target.files.length; i++) {

let picture = e.target.files[i];

if (picture) {

var reader = new FileReader();

reader.readAsDataURL(picture);

reader.onload = e =>{

this.picSrc.push(e.target.result);

};

} else {

swal({

title: ‘请选择上传图片‘,

confirmButtonText: ‘确定‘,

confirmButtonColor: ‘#294988‘,

type: ‘error‘,

});

}

picture.uploadDate = new Date();

this.files.push({pic: picture});

}