<template>
<div>
<el-upload
ref="exampleUploadRef"
class="avatar-uploader"
v-bind="_options"
:fileList="data.fileList"
:action="data.action"
:headers="data.headers"
:before-remove="beforeRemove"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-preview="handlePreview"
:on-exceed="handleExceed"
:on-success="uploadSuccess"
:on-error="errorMessage"
:on-change="handleChange"
>
<div
class="file_pics"
:class="{ noname: !_options.imgName, fileup: isFile }"
v-loading="showSpin"
>
<div v-if="hasCover" class="demo-upload-list">
<!--image-->
<img
v-if="
modelValue.includes('.png') ||
modelValue.includes('.jpg') ||
modelValue.includes('.jpeg') ||
modelValue.includes('.JPG')
"
:src="modelValue + '?x-oss-process=image/resize,m_lfit,h_200,w_200'"
width="100%"
class="imagefit"
alt=""
/>
<!--video-->
<img
v-else-if="modelValue.includes('.mp4')"
:src="
modelValue +
'?x-oss-process=video/snapshot,t_1,f_jpg,w_0,h_0,m_fast'
"
width="100%"
class="imagefit"
alt=""
/>
<!--file:pdf,zip...-->
<div v-else class="flex-column-center fileshow">
<img src="../../assets/icon/uploaded.svg" width="24px" alt="" />
<span v-if="fileName" class="file-txt ellipsis">{
{
fileName
}}</span>
</div>
<div class="demo-upload-list-cover" @click.stop>
<el-icon size="20" color="#fff" @click.stop="watchFile"
><View
/></el-icon>
<el-icon
v-if="_options.canDel && !_options.disabled"
size="20"
color="#fff"
@click.stop="delImg"
><Delete
/></el-icon>
</div>
</div>
<div
v-else
class="flex-column-center-center aim"
:class="{ disabled: _options.disabled }"
>
<img
v-if="isFile"
src="../../assets/icon/file.svg"
width="22px"
alt="upload"
/>
<img
v-else-if="isVideo"
src="../../assets/icon/video.svg"
width="20px"
alt="upload"
/>
<img v-else src="@/assets/icon/image.svg" width="36px" alt="upload" />
<slot></slot>
</div>
<div v-if="_options.imgName" class="name" @click.stop>
{
{
required ? "*" : "" }} {
{
_options.imgName }}
</div>
<div v-if="_options.imgTips" class="extips" @click.stop>
<el-icon><WarnTriangleFilled /></el-icon> {
{
_options.imgTips }}
</div>
</div>
</el-upload>
<el-dialog
v-model="previewUpload"
reset-drag-position
draggable
sticky
:title="_options.imgName || '图片详情'"
footer-hide
class-name="vertical-center-modal"
>
<div class="flex justify-center items-center">
<el-tooltip content="点击查看源文件">
<video
v-if="isVideo"
class="preview"
controls
autoplay
:src="modelValue"
@click="toTarget(modelValue)"
></video>
<img
v-else-if="isImage"
class="preview"
:src="modelValue"
@click
