View UI(iView) Upload 自定义多图上传列表提交
- 时间:
- 浏览:2403
- 来源:无双科技
iView Upload 自定义多图上传列表提交
可以自由控制上传列表,完成各种业务逻辑,示例是一个照片墙,可以查看大图和删除。
- 设置属性
show-upload-list
为 false,可以不显示默认的上传列表。 - 设置属性
default-file-list
设置默认已上传的列表。 通过
on-success
等属性来控制完整的上传过程,详见API。另外,可以通过丰富的配置,来定制上传需求,本例中包含了:文件必须是 jpg 或 png 格式的图片。
- 最多上传5张图片。
- 每个文件大小不超过 2M。
<div class="upload-list" v-for="item in uploadList"><div v-if="item.status === 'finished'"> <img :src="item.url"><div class="upload-list-cover"><Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon><Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon></div></div><div v-else><Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress></div></div><Uploadref="upload":show-upload-list="false":default-file-list="defaultList":on-success="handleSuccessImgUrl":format="['jpg','png','gif']":max-size="2048":on-format-error="handleFormatError":on-exceeded-size="handleMaxSize":before-upload="handleBeforeUpload"name='fileDataFileName'action="/Upload/ImgUpload" style="display: inline-block;width:58px;"> <div style="width: 58px;height:58px;line-height: 58px;"><Icon type="ios-camera" size="20"></Icon></div></Upload><Modal title="View Image" v-model="visible"> <img :src="imgName" v-if="visible" style="width: 100%"> </Modal>
图片上传后CSS样式列表
.upload-list img {width:100%;height:100%;}
.upload-list-cover {display:none;position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);}
.upload-list:hover .upload-list-cover {display:block;}
.upload-list-cover i {color:#fff;font-size:20px;cursor:pointer;margin:0 2px;}
上传操作并更新上传图片列表
<script> export default { data () { return { defaultList: [ { 'name': 'a42bdcc1178e62b4694c830f028db5c0', 'url': 'a42bdcc1178e62b4694c830f028db5c0.jpg' }, { 'name': 'bc7521e033abdd1e92222d733590f104', 'url': 'bc7521e033abdd1e92222d733590f104.jpg' } ], imgName: '', visible: false, uploadList: [] } }, methods: { handleView (name) { this.imgName = name; this.visible = true; }, handleRemove (file) { const fileList = this.$refs.upload.fileList; this.$refs.upload.fileList.splice(fileList.indexOf(file), 1); }, handleSuccess (res, file) { file.url = res.data; }, handleFormatError (file) { this.$Notice.warning({ title: 'The file format is incorrect', desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.' }); }, handleMaxSize (file) { this.$Notice.warning({ title: '超出文件大小限制', desc: '文件 ' + file.name + ' 太大, 不要超过 2M.' }); }, handleBeforeUpload () { const check = this.uploadList.length < 5; if (!check) { this.$Notice.warning({ title: '最多可上传5张图片.' }); } return check; } }, mounted () { this.uploadList = this.$refs.upload.fileList; } }</script>
后台保存提交上传图片的列表
imgUrl: JSON.stringify(this.uploadList),
PHP后台接收保存到数据库
$_imgUrl =json_decode(input('post.imgUrl'),true);
if (is_array($_imgUrl)) { for ($i=0; $i < count($_imgUrl); $i++) { $imgUrl .= $_imgUrl[$i]['url'].","; }}$imgUrl=substr($imgUrl,0,strlen($imgUrl)-1);
重新编辑时加载upload图片获取显示列表
imgUrl = itemInfo.img_url.split(",");for(var i = 0; i < imgUrl.length; i++) { _this.uploadList.push({ name:'', url:imgUrl[i], showProgress: false, status: "finished" });}
猜你喜欢