| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| 9259c2 | 2 | <div v-if="!disabled" class="upload-file"> |
| 820397 | 3 | <el-upload |
| H | 4 | ref="uploadRef" |
| 5 | v-model:file-list="fileList" | |
| 6 | :action="uploadUrl" | |
| 7 | :auto-upload="autoUpload" | |
| 8 | :before-upload="beforeUpload" | |
| 9 | :disabled="disabled" | |
| 10 | :drag="drag" | |
| 11 | :http-request="httpRequest" | |
| 12 | :limit="props.limit" | |
| 13 | :multiple="props.limit > 1" | |
| 14 | :on-error="excelUploadError" | |
| 15 | :on-exceed="handleExceed" | |
| 16 | :on-preview="handlePreview" | |
| 17 | :on-remove="handleRemove" | |
| 18 | :on-success="handleFileSuccess" | |
| 19 | :show-file-list="true" | |
| 20 | class="upload-file-uploader" | |
| 21 | name="file" | |
| 22 | > | |
| 9259c2 | 23 | <el-button type="primary"> |
| 820397 | 24 | <Icon icon="ep:upload-filled" /> |
| H | 25 | 选取文件 |
| 26 | </el-button> | |
| 9259c2 | 27 | <template v-if="isShowTip" #tip> |
| 820397 | 28 | <div style="font-size: 8px"> |
| H | 29 | 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> |
| 30 | </div> | |
| 31 | <div style="font-size: 8px"> | |
| 32 | 格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件 | |
| 33 | </div> | |
| 34 | </template> | |
| 35 | <template #file="row"> | |
| 36 | <div class="flex items-center"> | |
| 37 | <span>{{ row.file.name }}</span> | |
| 38 | <div class="ml-10px"> | |
| 39 | <el-link | |
| 40 | :href="row.file.url" | |
| 41 | :underline="false" | |
| 42 | download | |
| 43 | target="_blank" | |
| 44 | type="primary" | |
| 45 | > | |
| 46 | 下载 | |
| 47 | </el-link> | |
| 48 | </div> | |
| 49 | <div class="ml-10px"> | |
| 50 | <el-button link type="danger" @click="handleRemove(row.file)"> 删除</el-button> | |
| 51 | </div> | |
| 52 | </div> | |
| 53 | </template> | |
| 54 | </el-upload> | |
| 9259c2 | 55 | </div> |
| H | 56 | |
| 57 | <!-- 上传操作禁用时 --> | |
| 58 | <div v-if="disabled" class="upload-file"> | |
| 59 | <div v-for="(file, index) in fileList" :key="index" class="flex items-center file-list-item"> | |
| 60 | <span>{{ file.name }}</span> | |
| 61 | <div class="ml-10px"> | |
| 62 | <el-link :href="file.url" :underline="false" download target="_blank" type="primary"> | |
| 63 | 下载 | |
| 64 | </el-link> | |
| 65 | </div> | |
| 66 | </div> | |
| 820397 | 67 | </div> |
| H | 68 | </template> |
| 69 | <script lang="ts" setup> | |
| 70 | import { propTypes } from '@/utils/propTypes' | |
| 71 | import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus' | |
| 72 | import { isString } from '@/utils/is' | |
| 73 | import { useUpload } from '@/components/UploadFile/src/useUpload' | |
| 74 | import { UploadFile } from 'element-plus/es/components/upload/src/upload' | |
| 75 | ||
| 76 | defineOptions({ name: 'UploadFile' }) | |
| 77 | ||
| 78 | const message = useMessage() // 消息弹窗 | |
| 79 | const emit = defineEmits(['update:modelValue']) | |
| 80 | ||
| 81 | const props = defineProps({ | |
| 82 | modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired, | |
| 83 | fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg'] | |
| 84 | fileSize: propTypes.number.def(5), // 大小限制(MB) | |
| 85 | limit: propTypes.number.def(5), // 数量限制 | |
| 86 | autoUpload: propTypes.bool.def(true), // 自动上传 | |
| 87 | drag: propTypes.bool.def(false), // 拖拽上传 | |
| 88 | isShowTip: propTypes.bool.def(true), // 是否显示提示 | |
| 89 | disabled: propTypes.bool.def(false) // 是否禁用上传组件 ==> 非必传（默认为 false） | |
| 90 | }) | |
| 91 | ||
| 92 | // ========== 上传相关 ========== | |
| 93 | const uploadRef = ref<UploadInstance>() | |
| 94 | const uploadList = ref<UploadUserFile[]>([]) | |
| 95 | const fileList = ref<UploadUserFile[]>([]) | |
| 96 | const uploadNumber = ref<number>(0) | |
| 97 | ||
| 98 | const { uploadUrl, httpRequest } = useUpload() | |
| 99 | ||
| 100 | // 文件上传之前判断 | |
| 101 | const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { | |
| 102 | if (fileList.value.length >= props.limit) { | |
| 103 | message.error(`上传文件数量不能超过${props.limit}个!`) | |
| 104 | return false | |
| 105 | } | |
| 106 | let fileExtension = '' | |
| 107 | if (file.name.lastIndexOf('.') > -1) { | |
| 108 | fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1) | |
| 109 | } | |
| 110 | const isImg = props.fileType.some((type: string) => { | |
| 111 | if (file.type.indexOf(type) > -1) return true | |
| 112 | return !!(fileExtension && fileExtension.indexOf(type) > -1) | |
| 113 | }) | |
| 114 | const isLimit = file.size < props.fileSize * 1024 * 1024 | |
| 115 | if (!isImg) { | |
| 116 | message.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`) | |
| 117 | return false | |
| 118 | } | |
| 119 | if (!isLimit) { | |
| 120 | message.error(`上传文件大小不能超过${props.fileSize}MB!`) | |
| 121 | return false | |
| 122 | } | |
| 123 | message.success('正在上传文件，请稍候...') | |
| 124 | uploadNumber.value++ | |
| 125 | } | |
| 126 | // 处理上传的文件发生变化 | |
| 127 | // const handleFileChange = (uploadFile: UploadFile): void => { | |
| 128 | // uploadRef.value.data.path = uploadFile.name | |
| 129 | // } | |
| 130 | // 文件上传成功 | |
| 131 | const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => { | |
| 132 | message.success('上传成功') | |
| 133 | // 删除自身 | |
| 134 | const index = fileList.value.findIndex((item) => item.response?.data === res.data) | |
| 135 | fileList.value.splice(index, 1) | |
| 136 | uploadList.value.push({ name: res.data, url: res.data }) | |
| 137 | if (uploadList.value.length == uploadNumber.value) { | |
| 138 | fileList.value.push(...uploadList.value) | |
| 139 | uploadList.value = [] | |
| 140 | uploadNumber.value = 0 | |
| 141 | emitUpdateModelValue() | |
| 142 | } | |
| 143 | } | |
| 144 | // 文件数超出提示 | |
| 145 | const handleExceed: UploadProps['onExceed'] = (): void => { | |
| 146 | message.error(`上传文件数量不能超过${props.limit}个!`) | |
| 147 | } | |
| 148 | // 上传错误提示 | |
| 149 | const excelUploadError: UploadProps['onError'] = (): void => { | |
| 150 | message.error('导入数据失败，请您重新上传！') | |
| 151 | } | |
| 152 | // 删除上传文件 | |
| 153 | const handleRemove = (file: UploadFile) => { | |
| 154 | const index = fileList.value.map((f) => f.name).indexOf(file.name) | |
| 155 | if (index > -1) { | |
| 156 | fileList.value.splice(index, 1) | |
| 157 | emitUpdateModelValue() | |
| 158 | } | |
| 159 | } | |
| 160 | const handlePreview: UploadProps['onPreview'] = (uploadFile) => { | |
| 161 | console.log(uploadFile) | |
| 162 | } | |
| 163 | ||
| 164 | // 监听模型绑定值变动 | |
| 165 | watch( | |
| 166 | () => props.modelValue, | |
| 167 | (val: string | string[]) => { | |
| 168 | if (!val) { | |
| 169 | fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置 | |
| 170 | return | |
| 171 | } | |
| 172 | ||
| 173 | fileList.value = [] // 保障数据为空 | |
| 174 | // 情况1：字符串 | |
| 175 | if (isString(val)) { | |
| 176 | fileList.value.push( | |
| 177 | ...val.split(',').map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url })) | |
| 178 | ) | |
| 179 | return | |
| 180 | } | |
| 181 | // 情况2：数组 | |
| 182 | fileList.value.push( | |
| 183 | ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url })) | |
| 184 | ) | |
| 185 | }, | |
| 186 | { immediate: true, deep: true } | |
| 187 | ) | |
| 188 | // 发送文件链接列表更新 | |
| 189 | const emitUpdateModelValue = () => { | |
| 190 | // 情况1：数组结果 | |
| 191 | let result: string | string[] = fileList.value.map((file) => file.url!) | |
| 192 | // 情况2：逗号分隔的字符串 | |
| 193 | if (props.limit === 1 || isString(props.modelValue)) { | |
| 194 | result = result.join(',') | |
| 195 | } | |
| 196 | emit('update:modelValue', result) | |
| 197 | } | |
| 198 | </script> | |
| 199 | <style lang="scss" scoped> | |
| 200 | .upload-file-uploader { | |
| 201 | margin-bottom: 5px; | |
| 202 | } | |
| 203 | ||
| 204 | :deep(.upload-file-list .el-upload-list__item) { | |
| 205 | position: relative; | |
| 206 | margin-bottom: 10px; | |
| 207 | line-height: 2; | |
| 208 | border: 1px solid #e4e7ed; | |
| 209 | } | |
| 210 | ||
| 211 | :deep(.el-upload-list__item-file-name) { | |
| 212 | max-width: 250px; | |
| 213 | } | |
| 214 | ||
| 215 | :deep(.upload-file-list .ele-upload-list__item-content) { | |
| 216 | display: flex; | |
| 217 | justify-content: space-between; | |
| 218 | align-items: center; | |
| 219 | color: inherit; | |
| 220 | } | |
| 221 | ||
| 222 | :deep(.ele-upload-list__item-content-action .el-link) { | |
| 223 | margin-right: 10px; | |
| 224 | } | |
| 9259c2 | 225 | |
| H | 226 | .file-list-item { |
| 227 | border: 1px dashed var(--el-border-color-darker); | |
| 228 | border-radius: 8px; | |
| 229 | } | |
| 820397 | 230 | </style> |
