View UI(iView) Upload 自定义多图上传列表提交
2023-12-19 05:27:31
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> <Upload ref="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"
});}
文章来源:https://blog.csdn.net/qq_36264795/article/details/135073849
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!