vue iview upload组件上传文件,show-upload-list:true配合form,modal使用

<template>

<div class="contain_box">

<FormItem label="走访视频" prop="visitVideo">

<Upload

ref="video"

action="#"

multiple

show-upload-list

accept=".3gp,.mp4,.wmv,.avi"

:before-upload="beforeVisitVideo"

:on-remove="removeVideo"

>

<Button icon="ios-cloud-upload-outline" type="primary" ghost

>点击上传</Button

>

</Upload>

<div

style="display: flex; height: 80px; margin-top: 5px"

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

:key="index"

>

<video

id="media"

class="media"

style="width: 84%"

controls

:src="item"

></video>

<span style="line-height: 86px">

<Tooltip content="删除" placement="right">

<Icon

class="iconDele"

type="ios-close-circle-outline"

size="30"

@click="videoDele(index)"

/>

</Tooltip>

</span>

</div>

<!-- <div

class="fileName"

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

:key="index"

> -->

<!-- <span> {{ item.name }}</span> -->

<!-- 删除按钮,点击上传文件对象清空,可以重新上传 -->

<!-- @click=" -->

<!-- <Icon type="ios-close" size="20" color="#000" class="iconDele" /> -->

<!-- </div> -->

</FormItem>

<FormItem label="走访录音" prop="visitRecording">

<Upload

ref="sound"

action="#"

multiple

accept=".mp3,.wav,.m4a,.3pg,.mar,.wma"

:before-upload="beforeVisitSound"

:on-remove="removeSound"

>

<Button icon="ios-cloud-upload-outline" type="primary" ghost

>点击上传</Button

>

</Upload>

<div

style="display: flex; height: 54px; margin-top: 5px"

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

:key="index"

>

<audio :src="item" controls="controls" ref="player" preload="true">

<!--（1）属性：controls，preload

（2）事件：canplay，timeupdate，ended

（3）方法：play()，pause() controls：向用户显示音频控件（播放/暂停/进度条/音量）

preload：属性规定是否在页面加载后载入音频

canplay：当音频/视频处于加载过程中时，会发生的事件

timeupdate：当目前的播放位置已更改时

ended：当目前的播放列表已结束时-->

</audio>

<span style="line-height: 63px">

<Tooltip content="删除" placement="right">

<Icon

class="iconDele"

type="ios-close-circle-outline"

size="30"

@click="soundDele(index)"

/>

</Tooltip>

</span>

</div>

</FormItem>

</div>

</template>

data(){

return {

// 走访视频

videoFile: [],

// 走访录音

soundFile: [],

// 回显视频

videoDefault: [],

// 回显录音

soundDefault: [],

}}

// 组件初始化完成后要给upload的fileList一个数组容器,否则,上传文件后,组件将无法在页面默认展示上传列表

mounted() {

//切记,一定要给组件数据容器

this.videoFile = this.$refs.video.fileList;

this.soundFile = this.$refs.sound.fileList;

},

// 弹框开关回调

modalChange(val) {

// console.log(val);

if (!val) {

// 弹框关闭时清空所有组件信息,否则再次点开弹框时,因为vue的双向绑定,会展示上次表单数据

this.$refs["executedForm"].resetFields();

this.videoFile = [];

this.soundFile = [];

// upload组件清空方法

this.$refs.sound.clearFiles();

this.$refs.video.clearFiles();

} else {

//这里特别容易被丢失,切记

// 由于弹框关闭时,上传upload的fileList被清空了,灵魂再次无法安放了,

// 只能再次给予body(容器)得以安放并静静依次排列展示

this.soundFile = this.$refs.sound.fileList;

this.videoFile = this.$refs.video.fileList;

}

},