|
|
@@ -1,42 +1,28 @@
|
|
|
<template>
|
|
|
- <div class="component-upload-image">
|
|
|
- <el-upload
|
|
|
- ref="imageUpload"
|
|
|
- multiple
|
|
|
- :action="uploadImgUrl"
|
|
|
- list-type="picture-card"
|
|
|
- :on-success="handleUploadSuccess"
|
|
|
- :before-upload="handleBeforeUpload"
|
|
|
- :limit="limit"
|
|
|
- :on-error="handleUploadError"
|
|
|
- :on-exceed="handleExceed"
|
|
|
- :before-remove="handleDelete"
|
|
|
- :show-file-list="true"
|
|
|
- :headers="headers"
|
|
|
- :file-list="fileList"
|
|
|
- :on-preview="handlePictureCardPreview"
|
|
|
- :class="{ hide: fileList.length >= limit }"
|
|
|
- >
|
|
|
- <el-icon class="avatar-uploader-icon">
|
|
|
- <plus />
|
|
|
- </el-icon>
|
|
|
- </el-upload>
|
|
|
- <!-- 上传提示 -->
|
|
|
- <div v-if="showTip" class="el-upload__tip">
|
|
|
- 请上传
|
|
|
- <template v-if="fileSize">
|
|
|
- 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
|
|
- </template>
|
|
|
- <template v-if="fileType">
|
|
|
- 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
|
|
|
- </template>
|
|
|
- 的文件
|
|
|
- </div>
|
|
|
+ <div class="component-upload-image">
|
|
|
+ <el-upload ref="imageUpload" multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" :before-remove="handleDelete" :show-file-list="true" :headers="headers" :file-list="fileList" :on-preview="handlePictureCardPreview" :class="{ hide: fileList.length >= limit }">
|
|
|
+ <el-icon class="avatar-uploader-icon">
|
|
|
+ <plus />
|
|
|
+ </el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <!-- 上传提示 -->
|
|
|
+ <div v-if="showTip" class="el-upload__tip">
|
|
|
+ 请上传
|
|
|
+ <template v-if="fileSize">
|
|
|
+ 大小不超过
|
|
|
+ <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
|
|
+ </template>
|
|
|
+ <template v-if="fileType">
|
|
|
+ 格式为
|
|
|
+ <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
|
|
|
+ </template>
|
|
|
+ 的文件
|
|
|
+ </div>
|
|
|
|
|
|
- <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
|
|
|
- <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
|
|
|
+ <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|