123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <template>
- <div class="basic-image">
- <template v-for="(image,index) in fileList" :key="index">
- <img-row :file="image"
- :config="config"
- :remove-code="config.removeCode"
- :removable="true"
- @preview="handlePictureCardPreview"
- @after-remove="removeFile"></img-row>
- </template>
- <el-upload action="uploadUrl"
- class="upload-plus"
- :accept="accept"
- :before-upload="beforeUpload"
- :http-request="uploadFile"
- :show-file-list="false"
- multiple>
- <div class="image-plus" v-if="isAppend"><i class="el-icon-plus"></i></div>
- <template #tip>
- <div class="el-upload__tip">{{limitTip}}</div>
- </template>
- </el-upload>
- <el-dialog title="图片预览" v-model="dialogVisible">
- <cip-dynamic-image style="width:100%" :src="dialogImageUrl" alt=""/>
- </el-dialog>
- </div>
- </template>
- <script>
- import { computed, ref } from 'vue'
- import { ElUpload, ElDialog } from 'element-plus'
- import CipDynamicImage from '../../../cip-dynamic-image'
- import ImgRow from './img-row'
- import { formInputProps } from '../../form-input-props'
- import { uploadProps } from '../file/upload'
- export default {
- props: formInputProps,
- components: { ElUpload, ElDialog, ImgRow, CipDynamicImage },
- emits: ['update:modelValue'],
- setup (props, context) {
- const { fileList, mainMessage, countLimit, typeLimit, sizeLimit, ...uploadUtils } = uploadProps(props, context)
- const dialogImageUrl = ref('')
- const dialogVisible = ref(false)
- // 验证文件是否可以上传
- const beforeUpload = (file) => {
- if (mainMessage(typeLimit(file), '图片上传类型超出限制') ||
- mainMessage(countLimit(file), '图片上传数量超出限制') ||
- mainMessage(sizeLimit(file), '图片上传大小超出限制')) {
- return false
- }
- }
- const handlePictureCardPreview = (file) => {
- dialogImageUrl.value = props.config.imgTemplate ? props.config.imgTemplate(file.url) : file.url
- dialogVisible.value = true
- }
- // 限制提示语
- const limitTip = computed(() => {
- const { fileType, size } = props.config
- if (!!fileType && !!size) return `只能上传${fileType}文件,且不超过${size}MB`
- if (!!fileType && !size) return `只能上传${fileType}文件`
- if (!fileType && !!size) return `只能上传不超过${props.config.size}MB的文件`
- return ''
- })
- // 根据数量控制新增按钮
- const isAppend = computed(() => {
- return (props.config?.limit ?? Infinity) > fileList.value.length
- })
- const accept = computed(() => {
- const fileType = props.config.fileType
- if (fileType) {
- return '.' + fileType.replace(/,\s?/g, ',.')
- }
- return 'image/*'
- })
- return {
- ...uploadUtils,
- fileList,
- beforeUpload,
- handlePictureCardPreview,
- dialogVisible,
- dialogImageUrl,
- isAppend,
- limitTip,
- accept
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .basic-image{
- .image-plus{
- background-color: #fbfdff;
- border: 1px dashed #c0ccda;
- border-radius: 6px;
- box-sizing: border-box;
- width: 148px;
- height: 148px;
- cursor: pointer;
- line-height: 146px;
- vertical-align: top;
- text-align: center;
- i{
- font-size: 28px;
- color: #8c939d;
- }
- &:hover{
- border: 1px dashed #409eff;
- }
- }
- .upload-plus{
- display: inline-block;
- vertical-align: top;
- }
- }
- </style>
|