iview upload 关闭自带列表展示和仅用beforeUpload事件

<template>

<!-- 该组件适用于文件上传和表单上传接口分离的情况下 -->

<!-- 该组件只用到了iview-upload组件的beforeUpload功能,

为了方便url的默认回显和上传回显以及删除功能的路径转化,

默认列表展示和上传列表展示重新编译判断,关闭了组件自带的列表展示功能 -->

<div>

<div

class="demo-upload-list"

v-for="(item, index) in uploadList"

:key="index"

>

<template>

<img :src="item" />

<div class="demo-upload-list-cover">

<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>

<Icon

type="ios-trash-outline"

@click.native="handleRemove(item)"

></Icon>

</div>

</template>

</div>

<div

class="demo-upload-list"

v-for="(item, index) in defaultList"

:key="index + 'd'"

>

<template>

<img :src="item" />

<div class="demo-upload-list-cover">

<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>

<Icon

type="ios-trash-outline"

@click.native="handleRemoveD(item)"

></Icon>

</div>

</template>

</div>

<Upload

ref="upload"

:show-upload-list="false"

accept=".jpg,.jpeg,.png,.bmp"

:max-size="2048"

:before-upload="handleBeforeUpload"

multiple

type="drag"

action="#"

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="" v-model="visible">

<img :src="imgName" v-if="visible" style="width: 100%" />

</Modal>

</div>

</template>

<script>

export default {

// defaultList:默认列表数据,flag:同一个页面多次用组件时,用来判断数据归属字段,uploadList:上传列表数据

props: { defaultList: Array, flag: Number, uploadList: Array },

data() {

return { imgName: "", visible: false };

},

watch: {

uploadList: {

handler: function (val) {

// console.log(val);

this.$emit("getUploadList", this.flag, val, this.defaultList);

},

deep: true,

immediate: true,

},

defaultList: {

handler: function (val) {

// console.log(val);

this.$emit("getUploadList", this.flag, this.uploadList, val);

},

deep: true,

immediate: true,

},

},

created() {},

mounted() {},

methods: {

handleView(name) {

this.imgName = name;

this.visible = true;

},

// 删除照片(上传列表)

handleRemove(file) {

this.uploadList.splice(this.uploadList.indexOf(file), 1);

},

// 删除照片(默认列表)

handleRemoveD(file) {

this.defaultList.splice(this.defaultList.indexOf(file), 1);

},

handleBeforeUpload(file) {

if (file.size > 2048 * 1024) {

this.$Message.info("图片大小请勿超过 2M!");

return false;

}

const reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = () => {

if (this.uploadList.length + this.defaultList.length < 5) {

this.uploadList.push(reader.result);

} else {

this.$Message.info("最多只能上传五张照片!");

}

};

return false; //阻止图片继续上传，使得form表单提交时统一上传

},

},

};

</script>

<style lang="less" scoped>

.demo-upload-list {

display: inline-block;

width: 60px;

height: 60px;

text-align: center;

line-height: 60px;

border: 1px solid transparent;

border-radius: 4px;

overflow: hidden;

background: #fff;

position: relative;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

margin-right: 4px;

}

.demo-upload-list img {

width: 100%;

height: 100%;

}

.demo-upload-list-cover {

display: none;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: rgba(0, 0, 0, 0.6);

}

.demo-upload-list:hover .demo-upload-list-cover {

display: block;

}

.demo-upload-list-cover i {

color: #fff;

font-size: 20px;

cursor: pointer;

margin: 0 2px;

}

</style>