src/components/base-upload/index.vue

@@ -1,6 +1,15 @@
 <template>
 	<div class="base-upload" style="border-radius: 8px; margin-top: 38px; padding: 0; max-height: 500px;">
-		<el-upload class="yd-upload" action="#" :http-request="handleUpload" multiple :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove">
+		<el-upload
+			class="yd-upload"
+			action="#"
+			:http-request="handleUpload"
+			multiple
+			:file-list="fileList"
+			:on-preview="handleDownload"
+			:on-remove="handleRemove"
+			:before-remove="beforeRemove"
+		>
 			<!-- <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 size="small" type="primary">{{ buttonContent }}</el-button>
 			<div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
@@ -83,6 +92,7 @@ export default {
 				}
 			})
 		},
+
 		/** 大小验证 */
 		validateFile(file) {
 			this.extraUploadParams.typeCode = 'equipmentInfoFile'
@@ -94,9 +104,48 @@ export default {
 			return isRightSize
 		},
 
+		/** 点击下载 */
+		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)
+					console.log('下载地址：', alink.href)
+					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)