您好,登录后才能下订单哦!
原版 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});
}
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。