mt-yd-ui/src/components/base-upload/index.vue

<template>
	<div class="base-upload" style="border-radius: 8px; margin-top: 48px; padding: 0; max-height: 500px;">
		<el-upload
			class="yd-upload"
			action="#"
			:http-request="handleUpload"
			multiple
			:file-list="fileList"
			:on-preview="handleDownload"
			:on-remove="handleRemove"
			:before-upload="/.*?image.*?/i.test(extraParams.typeCode) ? validateImage : validateFile"
		>
			<!-- :before-remove="beforeRemove" -->
			<!-- accept="image/*" -->
			<!-- <el-upload class="yd-upload" :action="$http.adornUrl(url)" multiple name="files" :data="extraParams" :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove"> -->
			<el-button :disabled="readOnly" type="primary">{{ buttonContent }}</el-button>
			<div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
		</el-upload>
	</div>
</template>

<script>
import { pick } from 'lodash/object'

export default {
	name: 'BaseUpload',
	props: {
		url: String,
		buttonContent: String,
		tip: {
			type: String,
			default: null
		},
		extraParams: {
			type: Object,
			default: () => ({})
		},
		uploaderInjectFileList: {
			// 从外部传进来 fileList，用于展示文件列表用
			type: Array,
			default: () => []
		},
		readOnly: {
			type: Boolean,
			default: false
		}
	},
	// inject: {
	// 	parentDataForm: "_df"
	// },
	data() {
		return {
			fileList: []
		}
	},
	mounted() {
		this.fileList.splice(0)

		this.$watch('uploaderInjectFileList', function(val) {
			if (val && val.length) {
				console.log('this.uploaderInjectFileList', this.uploaderInjectFileList)
				/** uploaderInjectFileList 里关于文件的信息比较全，需要手动过滤一下 */
				this.fileList = val.map(item => {
					const name = item.fileUrl.split('/').pop()
					return { ...pick(item, ['id', 'fileName', 'typeCode']), name }
				})
			}
			console.log('fillist: ', this.fileList)
		})

		// if (this.parentDataForm) {
		// 	console.log('parent dataform: ', this.parentDataForm)
		// }
	},
	methods: {
		/** 自定义上传行为 */
		handleUpload(file) {
			const formData = new FormData()
			let files = file.file
			formData.append('files', files)

			this.$http({
				url: this.$http.adornUrl(this.url),
				method: 'POST',
				data: formData,
				params: {
					typeCode: this.extraParams.typeCode
				}
			}).then(({ data: res }) => {
				if (res && res.code === 0) {
					res.data.forEach(item => {
						const ext = item.fileUrl.split('.').reverse()[0]
						const name = `${item.fileName}.${ext}`
						this.fileList.push({ ...pick(item, ['id', 'fileName', 'typeCode']), name })
					})
					// TODO: 在新增和更新阶段，带入 fileIds[] 数组给后端，就可完成文件和设备类型的绑定、删除操作
					this.$emit('uploader-update-filelist', this.fileList)
				}
			})
		},

		/** 大小验证，由配置文件开启 */
		validateFile(file) {
			const isRightSize = file.size / 1024 / 1024 < 2
			if (!isRightSize) {
				// this.$message.error(this.$t('upload.picSizeAlarm'))
				this.$message.error('文件不应超过 2MB')
			}
			return isRightSize
		},

		/** 图片验证，由配置文件开启 */
		validateImage(file) {
			console.log('[*] 验证图片')

			const isRightSize = file.size / 1024 / 1024 < 2
			if (!isRightSize) {
				this.$message.error('文件不应超过 2MB')
				// this.$message.error(this.$t('upload.picSizeAlarm'))
			}

			const isAccept = new RegExp('image/*').test(file.type)
			if (!isAccept) {
				// this.$message.error(this.$t('upload.picAlarm'))
				this.$message.error('只允许上传图片')
			}
			return isRightSize && isAccept
		},

		/** 点击下载 */
		handleDownload({ id: fileId, name: fileName }) {
			const type = {
				download: 1,
				preview: 0
			}
			this.$http({
				url: this.$http.adornUrl('/monitoring/attachment/downloadFile'),
				method: 'get',
				params: this.$http.adornParams({
					attachmentId: fileId,
					type: type.download
					// fileName,
					// outputQuality,
					// scale
				}),
				responseType: 'blob'
			}).then(({ data: res }) => {
				const blob = new Blob([res])
				console.log('blob', blob)
				if ('download' in document.createElement('a')) {
					const alink = document.createElement('a')
					console.log('filename: ', fileName)
					alink.download = fileName
					alink.style.display = 'none'
					alink.target = '_blank'
					alink.href = URL.createObjectURL(blob)
					document.body.appendChild(alink)
					alink.click()
					URL.revokeObjectURL(alink.href)
					document.body.removeChild(alink)
				} else {
					navigator.msSaveBlob(blob, fileName)
				}
			})
		},

		// beforeRemove(file, filelist) {
		// 	return this.$confirm(`确定移除 ${file.name}?`)
		// },

		handleRemove(file, filelist) {
			// 把更新后的 fileList 传递出去
			this.$emit('uploader-update-filelist', filelist)
		}
	}
}
</script>

<style scoped>
.base-upload >>> .yd-upload {
	margin-bottom: 20px;
}

/* .base-upload >>> .el-button {
	display: block;
	width: 200px;
	position: relative;
	left: -50px;
} */

/* .base-upload >>> .el-upload--text {
	width: 100px;
	position: relative;
	left: -100px;
} */

.base-upload >>> .el-upload__tip {
	margin-top: 0;
	margin-left: 5px;
}

.base-upload {
	display: flex;
}

.yd-upload {
	/* background-color: #efefef; */
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
</style>